Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Идентификатор ячеек таблицы при dropdown (https://javascript.ru/forum/dom-window/50615-identifikator-yacheek-tablicy-pri-dropdown.html)

Veterinar 04.10.2014 15:44

Идентификатор ячеек таблицы при 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 больше.

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

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

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

kostyanet 04.10.2014 18:43

А что такое там будет this если на входе event?

Veterinar 04.10.2014 19:48

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

рони 04.10.2014 19:53

Veterinar,
попробуйте event.target.id

Veterinar 04.10.2014 20:41

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

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

kostyanet 04.10.2014 20:48

Сначала надо открыть консоль и закрыть алерты. В консоли вы спокойно можете рассмотреть все свойства event'ов и this'ов - что там валится, откуда, в какой фазе и все такое. Второе - у вас же должен быть placeholder - а он будет там, где вы собираетесь бросить предмет. Иначе как вы увидите куда бросать. Placeholder как таковой уже все должен показать. То есть вы подносите к ячейке 1, а рамка проявляется на ячейке 2, или наоборот. Надо просто алертами не пользоваться. Особенно когда драги и дропы, и всякие там фокусы-блюры.

Veterinar 04.10.2014 20:51

Ё-моё! )))))

В браузере FF начинает считать с 2, а в Chrome с 1...
В ИЕ уже боюсь смотреть ))))

kostyanet 04.10.2014 21:17

Там будет 3, для полного счастья. Может документацию почитать, http://jqueryui.com/droppable/#shopping-cart - там вот есть плейсхолдер.

Veterinar 04.10.2014 21:25

kostyanet, в каком месте вы нашли свой placeholder?
placeholder это вообще-то атрибут поля input, показывающий подсказку.

kostyanet 04.10.2014 21:45

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

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

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


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

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


Часовой пояс GMT +3, время: 17:15.