L'interfaccia utente di Jquery combina ordinabile e trascinabile

Question

Sto cercando di combinare un pannello trascinabile (in alto) e un pannello ordinabile (in basso).

Il trascinamento funziona correttamente, ma l'ordinamento ha esito negativo.

Ecco il mio JS violino: funzioni http://jsfiddle.net/dmUKY/9/

Sia goccia drag'n e ordinabili condivide la funzione droppable:drop. Quando si ordinano gli elementi, la funzione deve sostituire l'oggetto selezionato.

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

Come devo combinare queste due funzionalità?

Answer 1

modificare il codice per questo dovrebbe fare il trucco:

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

controllo sul violino: 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

credo che questo è quello che stavi cercando! !