淘汰赛 - 元素变得不可拖动 - 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)