JQuery UI Combines Sort and Drag and Drop

Question

I am trying to combine a draggable panel (top) and a sort panel (bottom).

Drag and drop works fine, but sorting fails.

Here is my JS fiddle: http://jsfiddle.net/dmUKY/9/

Both drag'n drop and sortable functions droppable:drop function. When sorting elements, the function should 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 to combine these two functions?

Answer 1

Change your code to this, you need to do the trick:

 obj.removeClass('draggable').addClass('editable').removeAttr('style'); //obj.addClass('droppable'); $(this).append(obj); 

check on fiddle: http://jsfiddle.net/dmUKY/11/

Answer 2

 $("#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(); 

DEMO JSFIDDLE

I think this is what you were looking for!