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

    });
        }
    );
});

Can you post this as a fiddle? It would help to trouble shoot your issues. — photo_tom, May 31 '12 at 01:14
I'm having the same issue, and I am using computed arrays so what Will proposes won't work for me. Let me know if you figure this one out. — jornare, Jun 06 '12 at 13:04

score 0 · Answer 1 · answered Jun 01 '12 at 13:56

0

Try using detach() rather than remove().

answered Jun 01 '12 at 13:56

Will

1

score 0 · Answer 2 · answered Jun 07 '12 at 08:02

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

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

2 Answers2