淘汰赛 - 元素变得不可拖动 - HTML5拖放答案

【问题标题】：Knockout - Element Becomes Undraggable - HTML5 Drag and Drop淘汰赛 - 元素变得不可拖动 - HTML5拖放
【发布时间】：2018-03-30 08:34:10
【问题描述】：

我正在使用此淘汰绑定将 html5 拖放添加到我的应用程序中。

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

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

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

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

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

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

拖动开始 - 13:24:54
dragEnd - 13:24:56
拖动开始 - 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);
}

感谢任何帮助，谢谢。

【问题讨论】：

我以前用过那个库，发现它缺少。我建议在它的地方检查这个。 github.com/rniemeyer/knockout-sortable | jsfiddle.net/rniemeyer/Jr2rE 它的事件和你有什么更强大。

标签： javascript html knockout.js drag-and-drop

【解决方案1】：

原来这是 chrome 的一个错误。

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

感谢其他答案。

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

【讨论】：

【解决方案2】：

您是否还在控制台中看到错误“user.AddStandard 不是函数”？我认为问题在于您的 drop 事件的淘汰赛上下文。

<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 函数中的内容。

【讨论】：