Knockout observableArray binding with JQuery drag/drop : undesirable behavior

Question

I have some divs in a container div bound to a knockout observable array using foreach binding. That's working nicely.

In the knockout afterAdd event, I use jQuery to create a listener for a (newly created) div's click event:

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

A click on the div deletes it. The div disappears from view. That's working nicely.

I make each of the divs draggable too:

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

The drag/drop is working as it should.

However, if I click on a div after it has been dragged and dropped onto a droppable, it does not disappear; it is either clinging to the droppable or the droppable is clinging to it. It takes a second click on the div to send it into oblivion.

Is there anything I can do to workaround this behavior?

Answer 1

I guess its to do with the events (multiple event registration on same element), here is my example which works on first click(close) 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());