Question

使用 RubaXa Sortable ，我正在做一个非常标准的（假设它是图书馆网站上的一个例子）将一个项目从一个组拖到另一个组。我需要将原始组和目标组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的控制台数组显示目标存在值但直接引用时为{（{1}}）。

进一步的调查除了遇到evt.target选项在 jsFiddle 版本中表现得好像不常见之外没有多大帮助，而它的工作原理应该如此我原来的。如果您不熟悉此版本的Sortable，则该选项指定应将dataIdAttr: 'id'拖动项目用作标识符。在 jsFiddle 的控制台中看到的（看似）随机结果与省略此选项时相同。控制台打印输出在我的原始版本中正确显示每个项目ID。

到达某个地方。它似乎可能是版本差异，我认为，一些错误？我的原始版本使用了库网站上最常用的版本。由于 jsFiddle 示例需要一个在线外部源，我给它github示例使用的js文件的URL。我尝试在原始网站上使用后者，并获得与 jsFiddle 相同的结果。

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

Answer 1

令我同样的沮丧和宽慰，这是一个错误。我通过版本v1.1.1和v1.2.0运行了几个同步测试，得出的结论是某些东西没有按照预期的方式运行并提交错误报告。

该图书馆的作者回复了更新的v1.2.1，该版本已删除我遇到的问题。

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

1 个答案: