使用 JQuery 拖放操作敲除 observableArray 绑定：不良行为答案

【问题标题】：Knockout observableArray binding with JQuery drag/drop : undesirable behavior使用 JQuery 拖放操作敲除 observableArray 绑定：不良行为
【发布时间】：2013-09-28 19:18:28
【问题描述】：

我在容器 div 中有一些 div，使用 foreach 绑定绑定到可淘汰的可观察数组。效果很好。

在剔除 afterAdd 事件中，我使用 jQuery 为（新创建的）div 的点击事件创建监听器：

                 mydiv.click(function () { 
                    // delete the corresponding item from 
                    // the observable array                     
                    self.myobservableArray.splice($(this).index(), 1);
                });

单击 div 会将其删除。 div 从视图中消失。效果很好。

我也让每个 div 都可以拖动：

                 mydiv.draggable({revert:"invalid"});

拖放操作正常。

但是，如果我在一个 div被拖放到 droppable 上之后单击它，它并不会消失；它要么依附于可丢弃物，要么可丢弃物依附于它。需要再次单击 div 才能将其发送到遗忘状态。

我能做些什么来解决这个问题吗？

【问题讨论】：

我猜它与事件有关（同一元素上的多个事件注册），这是我的示例，它适用于第一次单击（关闭）jsfiddle.net/dhanasekaran/P9C7E，如果您为您的问题添加 jsFiddle，会有所帮助
谢谢你的例子。我已经调整了我的方法及其工作方式。
太好了，我已将其作为您可以接受的答案。谢谢

标签： knockout.js ko.observablearray jquery-draggable

【解决方案1】：

我猜它与事件有关（同一元素上的多个事件注册），这是我的示例，适用于第一次单击（关闭） jsfiddle.net/dhanasekaran/P9C7E

<div data-bind="foreach:items">
    <a href="#" class="item" data-bind="draggable:true,droppable:true">
        <span  data-bind="text:$data"></span>
        <i data-bind="click:$parent.remove">X</i>
    </a>
</div>

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};

ko.bindingHandlers.droppable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).droppable();
    }
};

var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.init=function(){
        self.items(['One','Two','Three','Four','Five','Six']);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.init();
}

ko.applyBindings(new vm());

【讨论】：