Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.10.2014, 15:44
Профессор
Отправить личное сообщение для Veterinar Посмотреть профиль Найти все сообщения от Veterinar
 
Регистрация: 27.12.2013
Сообщений: 167

Идентификатор ячеек таблицы при dropdown
Генерируется таблица. Каждой ячейке присваивается id и свойство "ловящего элемента" (droppable).
Однако, при перетаскивании элемента в ячейку почему-то её адрес формируется не такой, как id ячейки:
tbl = '<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" id="dots">';
for(r=0; r<row; r++){
	tbl+='<tr>';
	for (c=0; c<col; c++){
		tbl+='<td id="cell_'+(r*col+c)+'" onclick="alert(this.id)">'+(r*col+c)+'</td>';
		};
		tbl+='</tr>';
	};
	tbl+='</table>';
	$('#Map').html(tbl);
	$('#dots td').droppable({
  		drop:function(event, ui){ alert(this.id);}
	});
}
При клике на ячейке её адрес (ряд и строка) показывается верный.
При "отпускании" (drop) элемента в ячейке отдаётся id на 2 больше.

Как так получается? Ничо не понимаю!

Кто сможет подсказать?

Спасибо за помощь!

Последний раз редактировалось Veterinar, 04.10.2014 в 15:47.
Ответить с цитированием
  #2 (permalink)  
Старый 04.10.2014, 18:43
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

А что такое там будет this если на входе event?
Ответить с цитированием
  #3 (permalink)  
Старый 04.10.2014, 19:48
Профессор
Отправить личное сообщение для Veterinar Посмотреть профиль Найти все сообщения от Veterinar
 
Регистрация: 27.12.2013
Сообщений: 167

kostyanet,
да, верно. А как передать/определить id элемента, где произошло событие?

Последний раз редактировалось Veterinar, 04.10.2014 в 19:54.
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2014, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

Veterinar,
попробуйте event.target.id
Ответить с цитированием
  #5 (permalink)  
Старый 04.10.2014, 20:41
Профессор
Отправить личное сообщение для Veterinar Посмотреть профиль Найти все сообщения от Veterinar
 
Регистрация: 27.12.2013
Сообщений: 167

рони, спасибо, но... нет. Пусто.
А просто id отдает id через ячейку.
Причем, если отпускать в ячейке 0:0 (в первой в таблице), то
alert(event.target.id); возвращает cell_2

Как бы начинает считать с 2, соответственно получается, что количество ячеек в строке на 2 меньше. При этом на двух правых ячейках в каждой строке drop не срабатывает - этих ячеек как бы нету.

Последний раз редактировалось Veterinar, 04.10.2014 в 21:07.
Ответить с цитированием
  #6 (permalink)  
Старый 04.10.2014, 20:48
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сначала надо открыть консоль и закрыть алерты. В консоли вы спокойно можете рассмотреть все свойства event'ов и this'ов - что там валится, откуда, в какой фазе и все такое. Второе - у вас же должен быть placeholder - а он будет там, где вы собираетесь бросить предмет. Иначе как вы увидите куда бросать. Placeholder как таковой уже все должен показать. То есть вы подносите к ячейке 1, а рамка проявляется на ячейке 2, или наоборот. Надо просто алертами не пользоваться. Особенно когда драги и дропы, и всякие там фокусы-блюры.
Ответить с цитированием
  #7 (permalink)  
Старый 04.10.2014, 20:51
Профессор
Отправить личное сообщение для Veterinar Посмотреть профиль Найти все сообщения от Veterinar
 
Регистрация: 27.12.2013
Сообщений: 167

Ё-моё! )))))

В браузере FF начинает считать с 2, а в Chrome с 1...
В ИЕ уже боюсь смотреть ))))
Ответить с цитированием
  #8 (permalink)  
Старый 04.10.2014, 21:17
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Там будет 3, для полного счастья. Может документацию почитать, http://jqueryui.com/droppable/#shopping-cart - там вот есть плейсхолдер.
Ответить с цитированием
  #9 (permalink)  
Старый 04.10.2014, 21:25
Профессор
Отправить личное сообщение для Veterinar Посмотреть профиль Найти все сообщения от Veterinar
 
Регистрация: 27.12.2013
Сообщений: 167

kostyanet, в каком месте вы нашли свой placeholder?
placeholder это вообще-то атрибут поля input, показывающий подсказку.
Ответить с цитированием
  #10 (permalink)  
Старый 04.10.2014, 21:45
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

placeholder это вообще-то местодержатель дословно.

А вот это щито?

drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}


При драгабле клиент должен видеть куда бросает - это ему и показывает местодержатель - в хтмле например див которому по событию драговер добавляется класс подсветки. Короче, читайте доку.

ЗЫ подсказку показывает атрибут title, а вы узко мыслите. В элементе input - placeholder точно такой же местодержатель определенного типа данных. То есть шаблон на который можно ориентироваться. А если вы туда пишите ВАШ ИМЕЙЛ - это ваши проблемы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена значений ячеек таблицы. madgals Events/DOM/Window 53 13.04.2020 12:14
Сортировка таблицы, при помощи js Prizrak177 Общие вопросы Javascript 10 02.09.2010 12:17
утечка памяти при создании DOM MadLord Общие вопросы Javascript 2 16.08.2010 12:01
Реализация функции JavaScript, меняющей содержимое ячеек таблицы по событию onchange BOJIKOJIAK Events/DOM/Window 1 24.05.2010 05:50
onmouseover отрабатывает по разному для одинаковых ячеек таблицы ilshat Events/DOM/Window 2 11.02.2009 12:25