I'm trying to combine a draggable panel (on top), and a sortable panel (bottom).
Dragging works fine, but sorting fails.
Here is my JS fiddle: http://jsfiddle.net/dmUKY/9/
Both drag'n drop and sortable functions shares the droppable:drop
function.
When sorting elements, the function has to replace the selected object.
drop: function (event, ui) {
//alert($(this).parent().html());
//alert($(ui.helper).attr('class'));
var obj;
if ($(ui.helper).hasClass('draggable')) {
//alert('draggable');
obj = $(ui.helper).clone();
obj.removeClass('draggable').addClass('editable')
//obj.addClass('droppable');
$(this).parent().append(obj);
}
//alert($(this).parent().html());
}
How should I combine these two functionalities?
$("#sortable").sortable({
revert: true,
stop: function(event, ui) {
if(!ui.item.data('tag') && !ui.item.data('handle')) {
ui.item.data('tag', true);
ui.item.fadeTo(400, 0.1);
}
}
});
$("#draggable").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid'
});
$("ul, li").disableSelection();
I guess this is what you were looking for !!