jQuery UI Droppable 和 Sortable - 放入正确的排序位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19732011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Droppable and Sortable - dropping in the correct sort location
提问by AaronS
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.
我正在开发一个项目，在该项目中，我使用 droppable 和 sortable 的组合将元素从 3rd 方 jQuery 控件拖动到 jQuery 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 jsfiddleof 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.
您可以从这里的 jQuery 购物卡 droppable 演示中看到这种行为。这是相同代码的jsfiddle。当您将产品中的商品添加到购物车底部时，它总是会添加到底部，即使您将其放在靠近顶部的位置。
Here's the jQuery code:
这是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");
}
});
});
回答by Udit Bhardwaj
use droppable'sdropevent's callbackto compare the current top offset position of the draggable helperwith the top offsetof every element already present or previously added in the droppable
使用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);
}
}
}
回答by tedwards947
What about doing this? Using both the connectToSortable AND connectWith options works, I think. There might be a more clever way to hide/show the placeholder, but this definitely works.
这样做怎么办？我认为同时使用 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();
}
}
});
});
