jQuery UI Droppable and Sortable - 放置在正确的排序位置

Posted 2023-05-08

【中文标题】jQuery UI Droppable and Sortable - 放置在正确的排序位置

【英文标题】：jQuery UI Droppable and Sortable - dropping in the correct sort location

【发布时间】：2013-11-12 23:07:44

【问题描述】：

我正在做一个项目，我正在使用 droppable 和 sortable 的组合将元素从 3rd 方 jQuery 控件拖动到 jQuery sortable。

这工作得很好，除了要添加的项目总是添加到可排序列表的底部，然后您必须将其作为单独的步骤移动到正确的位置。

是否可以将项目添加到您在列表中放置它的位置？

您可以在here 的 jQuery 购物卡可放置演示中看到此行为。这是相同代码的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");
         
     );
 );

【参考方案1】：

使用droppable's drop 事件的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);
    



 

DEMO WITH CODE

FULL SCREEN DEMO

【参考方案2】：

这样做怎么样？我认为同时使用 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();
            
        
    );
);

Work Demo in Fiddle

【讨论】：

+1 很棒的解决方案，因为它还包含一个占位符，这让用户可以清楚地看到他们选择的项目也在放置时进行排序。

很好的解决方案。但是，我使用的第 3 方控件没有实现来自 jQueryUI 的 connectTo，所以我无法使用它。我试图在我的问题中指出这一点，但没有详细说明，因此不会有太多关于控件本身的问题。感谢您的帮助。

这是一个很好的解决方案，但小提琴示例在我移出可放置区域后没有显示占位符。