4

connectToSortable オプションを使用してソート可能に接続されているドラッグ リストにアイテムのプールがあります。ここで、この並べ替えリストからいくつかの項目を削除し、それらをドラッグ リストに戻したいと考えています。取り消しのようなものです。ユーザーが 5 つの項目を並べ替えリストに移動し、4 つの項目だけが必要であると判断し、不要な項目を並べ替えリストからドラッグ リストにドラッグすることにしたとします。ソートリストに「削除」リンクを追加せずにこれを達成するにはどうすればよいですか。どうもありがとう。詳細については、http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/を参照してください。

4

2 に答える 2

5

このjQuery UI の例は、あなたが求めているもののようです。2 つの接続されたリストが特徴で、ユーザーはそれらの間で要素をドラッグできます。

しかし、あなたのシナリオは例と一致していないと思います。ドラッグ リストがあり、各 LI がドラッグ可能になり、別の UL にリンクされた UL がソート可能になったとします (例については、このリンクを参照してください)。ドラッグ リストから何かをドラッグするたびに、ドラッグされた要素のクローンが使用されます。「out」イベントを使用すると、アイテムをソート可能なリストの外にドラッグしたときに登録できます。「stop」イベントがトリガーされたときにアイテムがまだ外にある場合は、ソート可能なリストから削除します。並べ替え可能なウィジェットの ui.position & ui.offset プロパティを使用すると、実際に並べ替え可能なウィジェットから項目を削除する前に、項目がドラッグ リスト上でドラッグされたかどうかを判断できます。

お役に立てれば。

于 2009-06-19T04:31:14.380 に答える
0

最も簡単な解決策は、ドラッグ可能なリストをドロップ可能にし、そのドロップイベントを処理することだと思います。私は#priority_articles_list、ソート可能なものとli.articleグラガブルなものを持っています。それらは内部にあり#articlesます。最も単純なケースでは、 を呼び出すだけui.draggable.remove();で、うまくいくはずです。

$("#articles").droppable({
  accept: '#priority_articles_list > li',

  drop: function(ev, ui) {
    draggable_id = "#" + ui.draggable.attr("id").replace("priority_", "");
    $(draggable_id).removeClass("shouldnt_drag");
    ui.draggable.remove();
    if ($("#priority_articles_list").children("li").length == 1) {
      $("#priority_articles p").show();
    }
  }
});
于 2010-07-06T11:19:49.783 に答える