jquery - 2つの要素間のJqueryドラッグアンドドロップ

Question

画面の中央に特定の順序で 5 つの画像があるアプリケーションを作成する必要があります。次に、この画像のリストから画像を画面の端のどこかにドラッグできるようにしたいと考えています。次に、要素をリストにドラッグして戻す機能がありますが、元の位置に戻すには、リストが 1.2.3.4.5 のように正しい順序である必要があり、3 と 4 をドラッグすると画像のリストは 1.2.5 です。これはjqueryで可能ですか？

Answer 1

最良のオプションは、jQueryUIとその並べ替え可能な関数を使用することです。HTMLリスト間をドラッグアンドドロップできます。

http://jqueryui.com/demos/sortable/#connect-lists

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

上記の例では、IDが＃sortable1、＃sortable2のリストを作成する必要があります。connectWithを使用すると、これらのリストが接続する要素を定義できます。.connectedSortableを＃sortable1、＃sortable2に適用すると、それらの間でドラッグアンドドロップできるようになります。