2017-03-08 56 views
1

我有一个菜单结构,我想动态改变。菜单可以像这样列出。jquery droppable在同一类嵌套列表

<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> 

而jQuery代码如下所示:

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

    } 

}); 

正如你可以在jQuery的代码中看到的,我要赶在拖动的元素,并在它下降的元素。这里的问题是,jQuery在类可拖动的每个嵌套列表中运行drop函数。 我只想抓住最深的列表项。

回答