11

connectWith独自のタイプのリスト内でのみソートできるようにするために使用しているソート可能なリストがあります。

今、アイテムが並べ替えられているときにビューポートの下部に表示される、ドロップ可能なゴミ箱要素を作成しようとしています。この要素はリストのコンテキスト外にあり、ドロップされた要素を単純に削除します。必要な機能は、Android フォンのデスクトップからショートカットを削除するのと同じです。

問題は、ゴミ箱は「*」を受け入れるドロップ可能ですが、ソート可能はconnectWith他の「.dropZone」アイテムにのみ通知されるため、ソート可能な要素を取得してゴミ箱要素にホバー状態を発生させることができないことです.

イベントで各ソート可能をドラッグ可能にしようとしましたstartが、もちろん、そのドラッグ可能を正確な瞬間にドラッグしていないため、アクティブ化されていません。両方の要件を満たすことは可能ですか、それともごみ箱のホバーを手動で検出する必要がありますか?

4

2 に答える 2

18

はセレクターを受け入れるためconnectWith、接続されている他のリストとゴミ箱の両方を選択するセレクターを提供できます。

$("#sortable1, #sortable2").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#trash").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
    }
});

例: http://jsfiddle.net/petersendidit/YDZJs/1/

于 2010-10-30T13:09:33.937 に答える
1

ゴミ箱も作ってみ.dropZoneませんか？次に、適切なdropイベントを取得し、削除を適切に処理できます。

ゴミ箱を分別可能にする副作用があるかもしれませんが、簡単に回避できるはずです。

これが要件を満たしていない場合は、デモをどこかに投げていただけますか?そうすれば、必要な機能を追加しながら、構造をそのまま維持するために何を回避する必要があるかを正確に知ることができますか?

于 2010-10-28T10:40:21.400 に答える