0

ドラッグアンドドロップに使用している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. ドラッグを開始すると、ドラッグ可能なヘルパー クローンが表示されません。
  2. 「サブフォルダー 1」を超えている場合、ターゲットフォルダーのテキストは「削除済みおよびサブフォルダー 1」と見なされているため、「サブフォルダー 1」を超えている場合にのみ、event.target はフォルダー名を「削除済み」と表示しています。 .

この問題を解決する方法。フィドル: http://jsfiddle.net/3QMzh/3/

4

2 に答える 2