Почему цель сортируемого события равна нулю
Используя RubaXa Sortable, я делаю довольно стандартное (учитывая пример на сайте библиотеки) перетаскивание элемента из одной группы в другую. Мне нужно хранить исходные и целевые идентификаторы группы в качестве переменных. Все работает хорошо, кроме цели всегда NULL. Пример на сайте библиотеки не имеет отношения к адресации evt.target
так что я в неведении об этом.
Мой пример здесь:
https://jsfiddle.net/0brfa3w5/
HTML:
<div id="catscontainer">
<div id="parentone" class="parentcatcontainer">
<h4 class="parentcathead">Parent Catagory 1</h4>
<ul class="subcatlist" id="ul_parentcatone">
<li id="parentone_subone">Sub One</li>
<li id="parentone_subtwo">Sub Two</li>
<li id="parentone_subthree">Sub Three</li>
</ul>
</div>
<div id="parenttwo" class="parentcatcontainer">
<h4 class="parentcathead">Parent Category 2</h4>
<ul class="subcatlist" id="ul_parentcattwo">
<li id="parenttwo_subfour" style="">Sub Four</li>
</ul>
</div>
</div>
JS:
var sortyMainCats = Sortable.create(catscontainer, {
animation: 250,
ghostClass: "sortable-ghost",
handle: "h4",
draggable: "div",
dataIdAttr: 'id',
onUpdate: function (/**Event*/evt) {
var orderListMain = sortyMainCats.toArray();
var jsonOrderList = JSON.stringify(orderListMain);
}
});
[].forEach.call(document.getElementById('catscontainer').getElementsByClassName('subcatlist'), function (el){
var sortySubCats = Sortable.create(el, {
group: 'titles',
animation: 150,
dataIdAttr: 'id',
onUpdate: function (/**Event*/evt) {
var orderListSub = sortySubCats.toArray();
console.log('Dragged. Subs order is: ' + orderListSub);
},
// Element is dropped into the list from another list
onAdd: function (/**Event*/evt) {
var itemEl = evt.item; // dragged HTMLElement
var fromList = evt.from.id; // previous list
var toList = evt.target;
// + indexes from onEnd
console.log(evt);
console.log('Moved to new list. Old list was: ' + fromList + '. New list is: ' + toList);
}
});
});
ОБНОВИТЬ
Я лениво не проверял консоль в JsFiddle, поскольку копировал и вставлял это из моей собственной версии, которая производит NULL. Странно, это дает мне результат.
В моей оригинальной версии консольный массив evt
показывает целевой объект со значениями, но имеет значение NULL при прямой ссылке (evt.target
).
Дальнейшее расследование не сильно помогло, кроме как столкнуться с необычным случаем, когда dataIdAttr: 'id'
Опция действует так, как будто ее нет в версии jsFiddle, тогда как она работает так, как должна быть в моем оригинале. Если вы не знакомы с этой версией Sortable, опция указывает, что id
перетаскиваемых элементов следует использовать в качестве идентификаторов. (Казалось бы) случайные результаты, видимые в консоли на jsFiddle, такие же, как когда эта опция не указана. Распечатка консоли показывает идентификатор каждого элемента правильно в моей оригинальной версии.
Получение где-то. Кажется, это может быть связано с различиями версий и, я думаю, с некоторыми ошибками? Моя оригинальная версия использовала самую доступную версию с сайта библиотеки. Поскольку для примера jsFiddle требовался внешний источник в Интернете, я дал ему URL-адрес для файла js, используемого в примерах github. Я попытался использовать последний на моем исходном сайте и получил те же результаты, что и jsFiddle.
А сейчас evt.target
возвращает результат, но ввел две новые проблемы. Больше не использует предметы id
в результатах, а также, кажется, указывает неправильную цель, перечисляя себя (элемент) в качестве цели. Первоначальная проблема заключалась в том, что объект evt показал правильную цель в массиве консоли, но не мог быть решен напрямую с помощью evt.target, так как это приводило к NULL.
1 ответ
К моему равному разочарованию и облегчению, это была ошибка. Я провел несколько одновременных тестов версий v1.1.1 и v1.2.0, чтобы сделать вывод, что что-то не так, как было задумано, и подал отчет об ошибке.
Автор библиотеки ответил обновленной версией 1.2.1, которая устранила проблему, с которой я столкнулся.