Jquery UI combiner sortable et déplaçable

Je suis en train d'essayer de combiner un déplaçable panneau (sur le dessus), et triable panneau (en bas).

Glisser fonctionne très bien, mais le tri échoue.

Voici mon JS fiddle:
http://jsfiddle.net/dmUKY/9/

Les deux drag'n drop et triable fonctions des actions de la droppable:drop fonction.
Lors du tri des éléments, la fonction est de remplacer l'objet sélectionné.

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

Comment devrais-je combiner ces deux fonctionnalités?

OriginalL'auteur dams | 2013-08-23