Почему цель сортируемого события равна нулю

Используя 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, которая устранила проблему, с которой я столкнулся.

Другие вопросы по тегам