我正在使用此 knockout 绑定(bind)将 html5 拖放功能添加到我的应用程序中。
https://github.com/bramstein/knockout.dragdrop
我有两个可观察数组，其中的项目可以在它们之间拖动。
在页面加载时，两个列表中的所有项目都可以拖动并按预期工作。
当我尝试将项目拖回其原始列表时，会出现问题，拖放操作停止工作。
正如您从我的 console.log 中看到的，我已拖动并按住该元素几秒钟，然后将其放入列表 2 中。
当我尝试将同一元素拖回列表 1 时，拖动开始和拖动结束会立即触发。
- 拖动开始 - 13:24:54
- 拖结束 - 13:24:56
- 拖动开始 - 13:25:0
- 拖结束 - 13:25:0
下面是我的列表 1 的数据绑定(bind)
<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 的数据绑定(bind)
<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);
}
感谢任何帮助，谢谢。
最佳答案
事实证明这是 Chrome 的一个错误。
当在dragstart上修改DOM时，它显然破坏了html5拖放功能。
感谢其他答案。
dragend, dragenter, and dragleave firing off immediately when I drag
关于javascript - Knockout - 元素变得不可拖动 - HTML5 拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46810675/