jquery droppable auf verschachtelten Listen mit derselben Klasse

Question

Ich habe eine Menüstruktur, die ich dynamisch ändern möchte. Das Menü könnte so aufgelistet werden.

<ul> 
<li id="1/2" class='draggable'> 
    <ul> 
     <li id="1/3" class='draggable'> 
     content 
     </li> 
     <li id="2/4" class='draggable'> 
      <ul> 
       <li id="5/2" class='draggable'> 
       content 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 
<li id="1/6" class='draggable'> 
content 
</li> 

Und der jQuery-Code sieht wie folgt aus:

$(".draggable").draggable({ 
    revert: 'invalid', 
}); 

$(".draggable").droppable({ 
    hoverClass: "ui-state-active", 
    live: true, 
    drop: function(event, ui) { 

     var draggableId = ui.draggable.attr("id"); 
     var droppableId = $(this).droppable('option', 'accept', ui.draggable).attr("id"); 
     alert(draggableId + droppableId); 

    } 

}); 

Wie Sie in der jQuery-Code sehen, ich will das gezogene Element fangen, und das Element, wo sie fallen gelassen wird. Das Problem hierbei ist, dass jquery die drop-Funktion in jeder verschachtelten Liste mit der Klasse draggable ausführt. Ich möchte nur den tiefsten Listenpunkt erfassen.

Answer 1

Ich habe keine Ahnung, was Sie erreichen möchten, aber Sie können sich bei ähnlicher Frage über overlapping droppables here ansehen.

Auch ich bin zu raten, wenn Sie einen Baum oder ein Menü zu machen sind versuchen, können Sie mehr Glück mit jQueryUI Sortable > Connected Lists

Es gibt sogar ein Plugin (nicht Teil jQueryUI) speziell für Menüs/Bäume Sortierung: jQuery Sortable (nicht zu verwechseln mit dem oben genannten, trotz des gleichen Namens)

Viel Glück!