如何在使用 Knockout 删除拖动元素时删除答案

【问题标题】：How to remove a drag element, when was dropped with Knockout如何在使用 Knockout 删除拖动元素时删除
【发布时间】：2012-05-30 14:37:00
【问题描述】：

我有两个自定义绑定要拖放，并且有一个需要拖放到可拖放区域的元素列表，但是当这种情况发生时，我需要从源列表中删除拖动的元素，我正在这样做以下方式，但是当从源列表中删除拖动的元素时，我收到以下错误“无法获取属性'选项'的值：对象为空或未定义”，并且调试器在我的 jquery-ui 中中断。 1.8.17.min.js 文件，在这一行var d=a(this).data("draggable").options。问题出现在拖拽绑定中。

这是我的代码：

 var viewModelInstance = new ViewModel();
$(document).ready(function () {
    $(window).load(
        function () {
            var _dragged;
            ko.bindingHandlers.drag = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var dragElement = $(element);
                    var dragOptions = {
                        helper: 'clone',
                        revert: true,
                       start: function () {
                           _dragged = ko.utils.unwrapObservable(valueAccessor().value);
                           },
                        cursor: 'default'
                    };
                    dragElement.draggable(dragOptions).disableSelection();

                }
            };

            ko.bindingHandlers.drop = 
            {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var dropElement = $(element);
                    var dropOptions = {
                        drop: function (event, ui) {
                            var folder = dropElement[0].innerText;
                            viewModelInstance.UpdateCandidate(_dragged, viewModel, folder);
                           viewModelInstance.candidates.remove(_dragged);
                        }
                    };
                    dropElement.droppable(dropOptions);
                }
            };
            ko.applyBindings(viewModelInstance);

    });
        }
    );
});

【问题讨论】：

你能把这个作为小提琴发布吗？这将有助于解决您的问题。
我遇到了同样的问题，而且我正在使用计算数组，所以 Will 的建议对我不起作用。如果你解决了这个问题，请告诉我。

标签： knockout.js drag-and-drop custom-binding

【解决方案1】：

尝试使用 detach() 而不是 remove()。

【讨论】：

【解决方案2】：

我设法通过添加“setTimeout”来解决该错误，以便在敲除从列表中删除元素之前完成拖动操作。

在您的情况下，代码更改应类似于：

drop: function (event, ui) {
    var folder = dropElement[0].innerText;
    setTimeout( function(){
        viewModelInstance.UpdateCandidate(_dragged, viewModel, folder);
        viewModelInstance.candidates.remove(_dragged);
    },10);
}

希望这对你有用:)

【讨论】：