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

Posted

技术标签:

【中文标题】淘汰赛 - 元素变得不可拖动 - HTML5拖放【英文标题】:Knockout - Element Becomes Undraggable - HTML5 Drag and Drop 【发布时间】: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 它的事件和你有什么更强大。 【参考方案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 函数中的内容。

【讨论】:

以上是关于淘汰赛 - 元素变得不可拖动 - HTML5拖放的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干活盘点# 4.2 HTML5 拖放(Drag和Drop)

H5 拖放

HTML5拖放(Drag和Drop)元素使用详解

拖动原始元素 HTML5 拖放

HTML5 使用 Hammer.js 拖动事件在 div 上拖放元素

使用 HTML5 拖放,有没有办法在保持拖动流的同时隐藏元素