Jquery UI kombinierbar sortierbar und ziehbar

Question

Ich versuche ein ziehbares Panel (oben) und ein sortierbares Panel (unten) zu kombinieren.

Ziehen funktioniert gut, aber die Sortierung schlägt fehl.

Hier ist meine JS Geige: http://jsfiddle.net/dmUKY/9/

Sowohl Drag'n Drop und sortierbar Funktionen teilt die droppable:drop Funktion. Beim Sortieren von Elementen muss die Funktion das ausgewählte Objekt ersetzen.

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()); 
} 

Wie sollte ich diese beiden Funktionen kombinieren?

Answer 1

Ändern Sie Ihren Code sollte dies den Trick:

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

Prüfung an der Geige: 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

Ich denke, das ist das, was Sie suchen! !