JQuery UI Draggable - connectToSortable without helper clone - or how to move objects from one list to another
Check out this example .
The docs says that:
helper
must be set to "clone" to work flawlessly
Indeed, if I delete helper: 'clone'
, strange things happen while dragging.
The problem is that I am not interested in the "clone" behavior. I would like the items to move from one list to another.
Note. The original (left) list should not be sorted.
Any ideas?
source to share
I was struggling with this same problem. If I do set the helper to "original" I get all sorts of erratic and strange behavior.
Not sure if it will serve your purposes, but I wrote some code to listen for drag start / stop events as well as a sorted update event.
While dragging, the item is hidden from the list. If the item does not wrap to another list (defined by a boolean), the item is not displayed. However, if the item is transferred, the original will be deleted.
$(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 suit your specific needs, but I hope this is at least a good start.
source to share