web-dev-qa-db-ja.com

jQuery UIドロップ可能およびソート可能-正しいソート場所にドロップ

ドロップ可能とソート可能の組み合わせを使用して、サードパーティのjQueryコントロールからjQueryソート可能に要素をドラッグしているプロジェクトで作業しています。

これは完全に問題なく機能しますが、追加される項目は常に並べ替え可能なリストの一番下に追加され、別の手順として正しい場所に移動する必要があります。

リストにドロップした場所にアイテムを追加することはできますか？

この動作は、jQueryショッピングカードのドロップ可能なデモ here から確認できます。これは、同じコードの jsfiddle です。商品のアイテムをカートの下部に追加すると、上部にドロップしても常に下部に追加されます。

ここにjQueryコードがあります：

     $(function () {
     $("#catalog").accordion();
     $("#catalog li").draggable({
         appendTo: "body",
         helper: "clone"
     });
     $("#cart ol").droppable({
         activeClass: "ui-state-default",
         hoverClass: "ui-state-hover",
         accept: ":not(.ui-sortable-helper)",
         drop: function (event, ui) {
             $(this).find(".placeholder").remove();
             $("<li></li>").text(ui.draggable.text()).appendTo(this);
         }
     }).sortable({
         items: "li:not(.placeholder)",
         sort: function () {
             $(this).removeClass("ui-state-default");
         }
     });
 });
jqueryjquery-uijquery-ui-sortablejquery-ui-droppable
16
AaronS

使用する droppable'sdropイベントのcallbackを比較してcurrent top offset position of the draggable helper とともに top offset存在するか、以前に追加されたすべての要素のdroppable

drop: function (event, ui) {

if($(this).find(".placeholder").length>0)  //add first element when cart is empty
{
    $(this).find(".placeholder").remove();
    $("<li></li>").text(ui.draggable.text()).appendTo(this);
}

else
{

    var i=0; //used as flag to find out if element added or not

    $(this).children('li').each(function()
    {
        if($(this).offset().top>=ui.offset.top)  //compare
       {
          $("<li></li>").text(ui.draggable.text()).insertBefore($(this));
          i=1;   
          return false; //break loop
       }
    })

    if(i!=1) //if element dropped at the end of cart
    {
        $("<li></li>").text(ui.draggable.text()).appendTo(this);
    }

}

}

コード付きデモ

フルスクリーンデモ

23
UDB

これはどうですか？ connectToSortableとconnectWithオプションの両方を使用するとうまくいくと思います。プレースホルダーを非表示/表示するより賢い方法があるかもしれませんが、これは間違いなく機能します。

$(function () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        appendTo: "body",
        helper: "clone",
        connectToSortable: "#cart ol"
    });
    $("#cart ol").sortable({
        items: "li:not(.placeholder)",
        connectWith: "li",
        sort: function () {

            $(this).removeClass("ui-state-default");
        },
        over: function () {
            //hides the placeholder when the item is over the sortable
            $(".placeholder").hide(); 

        },
        out: function () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //shows the placeholder again if there are no items in the list
                $(".placeholder").show();
            }
        }
    });
});

フィドルで作業デモ

17
tedwards947