为什么可排序事件目标为空

Question

使用 RubaXa Sortable，我正在做一个非常标准的（假设它是图书馆网站上的一个例子）将一个项目从一个组拖到另一个组。我需要将原始组 ID 和目标组 ID 存储为变量。除了目标始终为 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 的控制台中看到的（看似）随机结果与省略此选项时的结果相同。控制台打印输出在我的原始版本中正确显示了每个项目 ID。

到达某个地方。看来这可能是由于版本差异，我认为是一些错误？我的原始版本使用的是图书馆网站上最可用的版本。由于 jsFiddle 示例需要在线外部资源，因此我将 URL 提供给 github 示例使用的 js 文件。我尝试在我的原始站点上使用后者并得到与 jsFiddle.

相同的结果

所以现在evt.targetreturns一个结果但是引入了两个新问题。它不再在结果中使用项目 id，而且它似乎也指定了错误的目标，将自身（项目）列为目标。最初的问题是 evt 对象在控制台数组中显示了正确的目标，但无法使用 evt.target 直接解决，因为这会产生 NULL。

Answer 1

令我同样沮丧和欣慰的是，这是一个错误。我运行通过版本 v1.1.1 和 v1.2.0 进行了多项同时测试，得出结论认为某些行为未按预期方式运行并提交了错误报告。

库的作者回复了更新的 v1.2.1，解决了我遇到的问题。

为什么可排序事件目标为空

Why is sortable event target null

javascript

dom-events

rubaxa-sortable