Вход

Просмотр полной версии : HTML5 DnD и dataTransfer


zzzzzz
03.05.2014, 17:59
Здравствуйте. На сайте w3schools есть такой пример

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_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.