How to remove a drag element, when was dropped with Knockout

Question

I have two custom bindings to drag and drop, and have a list of elements that i need to drop into a droppable area, but when this happend I need to remove the dragged element from my source list, I'm doing like the following way, but when the dragged element was remove from the source list,I receive the following error "Unable to get value of the property 'options': object is null or undefined", and the debugger break in my jquery-ui.1.8.17.min.js file, in this line var d=a(this).data("draggable").options. The problem occurs in the drag binding.

Here is my code:

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

    });
        }
    );
});

Answer 1

Try using detach() rather than remove().

Answer 2

I managed to get around the error by adding a "setTimeout" to let the drag operation finish before knockout removes the element from the list.

In your case the code changes should be something like:

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

Hope this works for you :)