jQuery UI Droppable 和 Sortable - 放入正确的排序位置 [英] jQuery UI Droppable and Sortable - dropping in the correct sort location

问题描述

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

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

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

您可以在 此处 的 jQuery 购物卡 droppable 演示中看到这种行为.这是相同代码的 jsfiddle.当您将产品中的商品添加到购物车底部时，它总是会添加到底部，即使您将其放在靠近顶部的位置.

这是jQuery代码:

 $(function () {$("#catalog").手风琴();$("#catalog li").draggable({附加到:身体"，助手:克隆"});$("#cart ol").droppable({activeClass: "ui-state-default",悬停类:ui-state-hover"，接受: ":not(.ui-sortable-helper)",下降:功能(事件，用户界面){$(this).find(".placeholder").remove();$("<li></li>").text(ui.draggable.text()).appendTo(this);}}). 可排序({项目: "li:not(.placeholder)",排序:函数(){$(this).removeClass("ui-state-default");}});});

解决方案

使用 droppable's drop 事件的 callback 比较 current可拖动助手的顶部偏移位置 与 droppable

中已经存在或之前添加的每个元素的顶部偏移

drop: function (event, ui) {if($(this).find(".placeholder").length>0)//当购物车为空时添加第一个元素{$(this).find(".placeholder").remove();$("<li></li>").text(ui.draggable.text()).appendTo(this);}别的{变量 i=0;//用作判断元素是否添加的标志$(this).children('li').each(function(){if($(this).offset().top>=ui.offset.top)//比较{$("<li></li>").text(ui.draggable.text()).insertBefore($(this));我=1;返回假；//中断循环}})if(i!=1)//如果元素落在购物车的末尾{$("<li></li>").text(ui.draggable.text()).appendTo(this);}}}

带代码的演示

全屏演示

I'm working on a project where I'm dragging elements from a 3rd party jQuery control to a jQuery sortable, using a combination of droppable and sortable.

This works perfectly fine, except the item being added is always added to the bottom of the sortable list, and you must then move it to the correct location as a separate step.

Is it possible to have the item added to the location where you dropped it in the list?

You can see this behavior in the jQuery shopping card droppable demo from here. Here is a jsfiddle of the same code. As you add items from the products to your cart at the bottom, it always adds at the bottom, even if you drop it near the top.

Here's the jQuery code:

     $(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");
         }
     });
 });

解决方案

use droppable's drop event's callback to compare the current top offset position of the draggable helper with the top offset of every element already present or previously added in the 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

这篇关于jQuery UI Droppable 和 Sortable - 放入正确的排序位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！