CODEWITHSUNDEEP
javascriptjquery-uijquery-ui-sortabledroppable
user1455270
user1455270

Reputation: 113

Drag from sortable to droppable?

Not sure if this can be done, some have said no, need to be able to drag from a sortable and drop on a dropable and have the drop actually occur. The jsfiddle is based on another example that implemented a trash can but I need the item to move to the new list. Note the drop only accepts items from sortable2.

http://jsfiddle.net/LrVMw/4/

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #drop_zone'
}).disableSelection();

$("#drop_zone").droppable({
    accept: "#sortable2 li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
      // ????        
    }
});

Upvotes: 0

Views: 867

Answers (1)

Jimmy Knoot
Jimmy Knoot

Reputation: 2388

The question is, what do you want to do with the element once it is dropped?

For example, if you want to remove the element when it is dropped, like the trashcan example, your drop function looks like this:

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        $(ui.draggable[0]).remove();
    }
});

I've included an updated jsFiddle for you: http://jsfiddle.net/LrVMw/5/

Documentation on the drop event: http://api.jqueryui.com/droppable/#event-drop

If it is something else you want, then let me know.

EDIT

To remove the element from the list and add it to a list of the dropzone, you just have to add 1 line to the drop function:

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (ev, ui) {
        $("<li></li>").text(ui.draggable.text()).appendTo(this); // It's this line
        ui.draggable.remove();
    }
});

Edited jsFiddle: http://jsfiddle.net/LrVMw/8/

EDIT 2

Instead of just getting the text from the li element that is dropped, we will get the full html of it, just abit of tweaking gives:

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (ev, ui) {
        $("<li></li>").html(ui.draggable.html()).appendTo(this);
        ui.draggable.remove();
    }
});

And the jsFiddle: http://jsfiddle.net/LrVMw/9/

Upvotes: 4

Related Questions