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());