jQuery UI Draggable - connectToSortable without helper clone - or how to move items from one list to another

Question

Have a look at this example.

The docs says that:

helper must be set to 'clone' in order to work flawlessly

Indeed, if I remove helper: 'clone', strange things happen when dragging.

The problem is that I'm not interested in the "clone" behavior. I would like the items to move from one list to another.

Note: The original (left) list shouldn't be sortable.

Any ideas?

Answer 1

I've been struggling with this same problem. If I do indeed set the helper to 'original' I get all kinds of jumpy and weird behavior.

Not sure if it will serve your purposes, but I wrote some code to listen to the drag start/stop events and also the sortable update event.

On drag start the item is hidden from the list. If the item is not transferred to the other list (determined by a boolean) then the item is unhidden. However, if the item is transferred then the original is removed.

$(function() {
var transferred = false;
$('#draggable li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    start: function(event, ui)
    {
        $(this).hide();
    },
    stop: function(event, ui)
    {
        if(!transferred)
            $(this).show();
        else
        {
            $(this).remove();
            transferred = false;
        }
    }
});

$('#sortable').sortable({
    receive: function(event, ui)
    {
        transferred = true;
    }
});

}); ​

Modified jsfiddle example. (http://jsfiddle.net/xD2dW/12/)

Obviously the code can be modified to meet your specific needs, but I hope this is at least a good start.

Answer 2

helper: function(){ //Do Something; }