1
私は動的に変更したいメニュー構造を持っています。メニューは次のように表示されます。同じクラスのネストされたリストでjqueryをドロップする
<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コードのようになります。あなたは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は、クラスをドラッグ可能なネストされたリスト内でドロップ関数を実行することです。 私は最も深いリスト項目をキャッチしたいだけです。