Javascript 敲除-元素变得不可拖动-HTML5拖放

我使用这个击倒绑定将html5拖放添加到我的应用程序中

我有两个可观察的数组，其中的项可以在它们之间拖动

在页面加载时，两个列表中的所有项目都可以拖动并按预期工作

当我尝试将项目拖回其原始列表时，问题就会出现，拖放操作将停止工作

正如您从my console.log中看到的，我已经拖动并保持了元素几秒钟，然后将其放入列表2中

当我尝试将同一元素拖回列表1时，拖动开始和拖动结束会立即触发

dragStart-13:24:54 德拉根德-13:24:56 dragStart-13:25:0 德拉根德-13:25:0 下面是列表1的数据绑定

    <ul data-bind="
        dropzone: { name: 'unassigned', drop: $root.DropUnassignedStandard }">

        <!-- ko foreach: DupeStandards -->
            <li data-bind="text: Name, 
                dragzone: { name: 'assigned', dragStart: $root.onStart, dragEnd: $root.onEnd }" draggable="true" />
        <!-- /ko -->
    </ul>

下面是我的ONED函数

self.onEnd = function (data) {

    var currentDate = new Date();
    var datetime = currentDate.getHours() + ":"
        + currentDate.getMinutes() + ":"
        + currentDate.getSeconds();

    console.log('dragEnd - ' + datetime);
}

下面是将项目从列表1移动到列表2的功能

self.DropAssignedStandard = function (droppedStandard) {

    self.UnassignedDupeStandards.push(droppedStandard);

    var user = ko.utils.arrayFirst(self.Users(),
        function (user) {
            return ko.utils.arrayFirst(user.DupeStandards(),
                function (ds) {
                    return ds.DupeStandardID === droppedStandard.DupeStandardID;
                });
        });

    user.RemoveStandard(droppedStandard);
}

下面是将项目从列表2移动到列表1的功能

self.DropUnassignedStandard = function (droppedStandard, user) {
    user.AddStandard(droppedStandard);
    self.UnassignedDupeStandards.remove(droppedStandard);
}

---

非常感谢您的帮助。

您是否也看到了错误user.AddStandard不是您控制台中的功能？我认为问题在于你的淘汰赛的背景

<ul data-bind="
    dropzone: { name: 'unassigned', drop: $root.DropUnassignedStandard }">

---

不幸的是，因为数据绑定附加在foreach之外，所以第二个参数是根视图模型，user.AddStandard将出错。您将需要一种不同的方法来确定该项属于哪个用户。可能与DropAssignedStandard函数中的类似

这是一个chrome的bug

在dragstart上修改DOM时，它显然破坏了html5的拖放功能

多亏了其他答案

---

我以前用过那个图书馆，但发现缺少。我建议在它的位置检查一下这个它的事件和你所拥有的东西更强大一些。

self.DropUnassignedStandard = function (droppedStandard, user) {
    user.AddStandard(droppedStandard);
    self.UnassignedDupeStandards.remove(droppedStandard);
}

<ul data-bind="
    dropzone: { name: 'unassigned', drop: $root.DropUnassignedStandard }">

self.DropUnassignedStandard = function (droppedStandard, user) {
    user.AddStandard(droppedStandard);
    self.UnassignedDupeStandards.remove(droppedStandard);
}