CODEWITHSUNDEEP
jqueryjquery-uidraggabledroppable
Aaron
Aaron

Reputation: 550

jQuery UI draggable - remove clone if a valid drop occurred

I'm trying to get something like the following to work but can't find the correct way to use the stop event for this.

I've got two columns where you can drag from the right to the left. I've got the revert function working correctly if the drop was invalid but I want to remove the item in the right column if a valid drop occurred on the left column. I know the conditional isn't correct but I'm not sure what flag to look for to determine if the drop was valid. 

$("#sortable2 li").draggable({
        connectToSortable: "#sortable1",
        helper: "clone",
        revert: "invalid",
        stop: function (event, ui) {
            if (drop == "valid") 
            { 
               $(this).remove(); 
            }
        }
    });

Upvotes: 3

Views: 13425

Answers (3)

Akira Kronic
Akira Kronic

Reputation: 164

If you are not sorting anything and want the original item to be remove as the drop is valid, you can just remove the helper:"clone".

$("#sortable2 li").draggable({
    revert: "invalid",
});

Upvotes: 0

MikeM
MikeM

Reputation: 27405

you can handle removing the original element using the receive event on the .sortable

example jsfiddle

$("#sortable1").sortable({
    receive: function (event, ui) { // add this handler
        ui.item.remove(); // remove original item
    }
});

$("#sortable2 li").draggable({
    connectToSortable: "#sortable1",
    helper: "clone",
    revert: "invalid"
});

Upvotes: 13

Hyper
Hyper

Reputation: 312

As a start you can compare the differences between event-start and event-stop. Use a debugger to break into the Event Function and you can see the difference between the two.

Upvotes: 0

Related Questions