淘汰賽-元素變得不可拖動-HTML5拖放

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和dragleave立即觸發

Answer 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函數中的功能。