Question

我正在使用这个敲除绑定来添加html5拖放到我的应用程序。

https://github.com/bramstein/knockout.dragdrop

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

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

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

正如您在我的console.log中看到的那样，我拖动并按住元素几秒钟，然后将其放入列表2中。

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

dragStart - 13:24:54
dragEnd - 13:24:56
dragStart - 13：25：0
dragEnd - 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>

以下是我的数据绑定列表2

<div data-bind="
    dropzone: { name: 'assigned', drop: $root.DropAssignedStandard }">

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

以下是我的onStart功能

self.onStart = function (data) {

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

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

下面是我的onEnd函数

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);
}

感谢任何帮助，谢谢。

Answer 1

原来这是chrome的一个错误。

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

感谢其他答案。

dragend, dragenter, and dragleave firing off immediately when I drag

Answer 2

您是否也在控制台中看到错误“user.AddStandard不是函数”？我认为问题是你的掉落事件的淘汰赛背景。

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

在DropUnassignedStandard函数中，您的假设是第二个参数是用户。

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

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

淘汰赛 - 元素变得无法攻击 - HTML5拖放

2 个答案: