我在一个项目中，我将元素从第三方jQuery控件拖到jQuery可排序，使用可抽取和可排序的组合。
这是非常正常的，除了添加的项目总是添加到可排序列表的底部，然后必须将其移动到正确的位置作为单独的步骤。
是否可以将项目添加到您将其放在列表中的位置？
您可以在here的jQuery购物卡droppable演示中看到此行为。这是一个相同代码的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");
}
});
});
解决方法
使用droppable的drop事件的回调来比较可拖动助手的当前顶部偏移位置与已存在或先前添加到可拖放的每个元素的顶部偏移量
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);
}
}
}
