Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   HTML5 DnD и dataTransfer (https://javascript.ru/forum/dom-window/46987-html5-dnd-i-datatransfer.html)

zzzzzz 03.05.2014 17:59

HTML5 DnD и dataTransfer
 
Здравствуйте. На сайте w3schools есть такой пример

http://www.w3schools.com/html/tryit....l5_draganddrop

Перетаскиваемый элемент имеет id, поэтому его айдишник легко записать в датаТрансфер, а в событии drop получить из объекта датаТрансфер этот айди и уже по нему найти (getElementById)перетаскиваемый элемент

пример из ссылки выше - хорош, при условии что перетаскиваемых элементов несколько, которым можно назначить айди и все в шоколаде

А если у меня таких элементов 375? Каждому айди присваивать?

Пытался в датаТрансфер записать объект типа event.target но в таком же виде получить его не смог через dataTransfer.getData

Как быть?

danik.js 03.05.2014 18:09

Передавай индекс.
var elements = document.querySelectorAll('.draggable');
var dragStartHandler = function(event) {
	var index = this.getAttribute('data-index');
	event.dataTransfer.setData('application/x-element-index', index);
};
for (var i = 0; i < elements.length; i++) {
	var element = elements[i];
	element.draggable = true;
	element.ondragstart = dragStartHandler;
	element.setAttribute('data-index', i);
};

Вместо расстановки индексов, можно преобразовать NodeList в Array и вычислять индекс через .indexOf() в обработчике.

Насчет кастомного MIME-типа не уверен. Возможно в IE не будет работать, так что придется использовать Text.


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