ドラッグアンドドロップに使用しているliのリストがあります。私のliの形式は次のとおりです。
<div id="test" class="list">
<ul>
<li>Inbox
<ul></ul>
</li>
<li>Sent
<ul></ul>
</li>
<li>Archive
<ul></ul>
</li>
<li>Deleted
<ul>
<li>Sub Folder 1</li>
</ul>
</li>
</ul>
</div>
以下は、ドラッグ可能な初期化のコードです。
$('#test li').draggable({
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: 'move'
});
$("#test li ").droppable({
hoverClass: "ui-state-active",
activeClass: "ui-state-highlight",
over: function(event, ui) {
var folderName = $(event.target).text();
$(ui.helper).text("Move to "+folderName);
}
});
「サブフォルダー 1」のドラッグを開始したとします。「受信トレイ」などのアイテムに移動すると、「送信済み」ツールチップが「受信ボックスに移動」、「送信済みに移動」と表示されます。しかし、私が再びサブフォルダーにいるとき。「Move to」テキストを表示したくありません。その代わりに、folderName "Sub Folder 1" のみを表示したい。
問題:
- ドラッグを開始すると、ドラッグ可能なヘルパー クローンが表示されません。
- 「サブフォルダー 1」を超えている場合、ターゲットフォルダーのテキストは「削除済みおよびサブフォルダー 1」と見なされているため、「サブフォルダー 1」を超えている場合にのみ、event.target はフォルダー名を「削除済み」と表示しています。 .
この問題を解決する方法。フィドル: http://jsfiddle.net/3QMzh/3/