example - jQuery UI Droppable and Sortable-colocando en la ubicación de ordenación correcta
sortable jquery ejemplos (2)
¿Qué hay de hacer esto? El uso de las dos opciones connectToSortable AND connectWith funciona, creo. Puede haber una forma más inteligente de ocultar / mostrar el marcador de posición, pero esto definitivamente funciona.
$(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();
}
}
});
});
Demo de trabajo en Fiddle
Estoy trabajando en un proyecto en el que arrastro elementos de un control jQuery de terceros a un jQuery clasificable, utilizando una combinación de dropable y clasificable.
Esto funciona perfectamente bien, excepto que el elemento que se agrega siempre se agrega al final de la lista de ordenación, y luego debe moverlo a la ubicación correcta como un paso separado.
¿Es posible agregar el elemento a la ubicación donde lo colocó en la lista?
Puede ver este comportamiento en la demo descargable de la tarjeta de compras jQuery desde here . Aquí hay un jsfiddle del mismo código. A medida que agrega artículos de los productos a su carrito en la parte inferior, siempre se agrega en la parte inferior, incluso si lo coloca cerca de la parte superior.
Aquí está el código 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");
}
});
});
use la callback de callback del evento droppable''s drop para comparar la posición current top offset position of the draggable helper con el top offset de cada elemento ya presente o agregado previamente en el 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);
}
}
}