2

jQuery UI のドロップ可能機能の適切な使用について頭を悩ませようとしています。最終的にキューとして機能するリストに取り組んでいます。これは、顧客が配送を希望する本とその順序を選択できるブック クラブ用です。これは、ユーザーが興味のある DVD のキューを設定できる、Netflix の元のビジネス モデル (ストリーミング前) に似ています。

したがって、2 つのリストがあり、1 つはユーザーのキューを表し、もう 1 つは適格なアイテムを表します。対象アイテムのリストから自分のキューにアイテムをドラッグできます。この場合、アイテムは「適格なアイテム」リストに残り、クローンがキューに追加されます (同じアイテムを複数追加できるため)。

キューはドラッグ アンド ドロップで並べ替えることができるはずですが、まだそこまで進んでいません。一歩ずつ。

「適格なアイテムのリストからキュー リストへのドラッグ」ステップに取り組んでいるときに、次の問題に遭遇しました。リストに追加された新しいアイテムがドロップ ターゲットではありませんでした。コードを見ると、これは理にかなっています：

<ul id='list1'>
    <li>Some</li>
    <li>Thing</li>
</ul>

<ul id='list2'>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
    <li>Electric Banana</li>
    <li>Flamingo Pink</li>
</ul>

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({
        drop: function(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = jQuery.clone(ui.draggable[0]);
            // Get rid of the inline styles that jQuery has put on the element.
            jQuery(event.target).before(dropElement);
        }
    });
});

ドロップ可能なリスナーは、初期化中に #list1 内のアイテムのみを対象としていることがわかります。したがって、#list2 から何かをドラッグすると、リストに追加されますが、ドロップ イベントのリスナーはありません。

リストに追加するすべてのアイテムにドロップリスナーを追加することでこれを修正しました（fiddleを参照）：

jQuery(document).ready(function($) {
    $('#list2 li').draggable( {
        cursor: 'move',
        helper: 'clone',
    });
    $('#list1 li').droppable({ drop: dropHandler });

    function dropHandler(event, ui){
            console.log(event);
            console.log(ui);

            var dropElement = $.clone(ui.draggable[0]);
            $(dropElement).droppable({ drop: dropHandler });
            // Get rid of the inline styles that jQuery has put on the 
            $(event.target).before(dropElement);
        }
});

しかし、より良い方法があるかどうかはわかりません。ドロップ リスナーをリストに移動して #list1 自体にイベントをドロップしようとしましたが、要素がドロップされたリスト アイテムを特定する方法がわかりませんでした。event.target は個々の li ではなく、ul 要素です。

これで正しい方向に進んでいますか？

-ジョシュ

4

1 に答える 1