JQuery UI ordenable - Agregar marcadores de posición a las listas para simular espacios vacíos

Question

JQuery UI Sortable funciona muy bien para listas sin espacios vacíos, pero digamos que quiero mostrar una lista de elementos con espacios vacíos, p.

1, 2, vacío, 4, 5, 6, vacío, 8

donde el número representa el número de ranura. El comportamiento esperado entonces sería si el usuario arrastra un elemento sobre la ranura 2, el 2 valor se empuja a la ranura vacía 3, y el usuario podría soltar el nuevo elemento en la ranura 2, mientras que si arrastran un nuevo elemento sobre la ranura 2 3 espacios vacíos, los elementos de la lista no se presionarían hacia abajo, y el usuario podría simplemente colocar el nuevo elemento en el espacio vacío 3. Espero que esto tenga sentido.

He estado buscando el código JQuery UI Sortable, y parece que necesito utilizar el cambio y recibir devoluciones de llamada para lograr esto, pero, siendo nuevo en JQuery/JS en general, no está claro qué usar para agregar estos marcadores de posición de ranura vacíos y administrar la lista de selección para no romper la funcionalidad de clasificación con código personalizado.

Cualquier puntero, ejemplo, etc. sería muy apreciado.

Después de golpearse la cabeza en esto por un tiempo, he creado un jsFiddle: http://jsfiddle.net/pdHnX/

para ayudar a explicar el problema. Creo que todo lo que estoy tratando de lograr puede suceder en un método reemplazado de rango de arreglo. El código de violín maneja el caso donde un artículo está reemplazando un elemento de relleno, pero hay un problema extraño, donde si arrastras un elemento de la lista de elementos a la lista de relleno, suelta el elemento y luego arrastra el mismo elemento dentro de la lista de relleno , la lista de relleno se reduce en 1, lo cual es un problema.

Hay más problemas una vez que empiezas a arrastrar más elementos a la lista de relleno, pero aquí es donde estoy con el problema en este momento.

Answer 1

Disculpe, esta fue una pregunta realmente difícil de detallar. Los requisitos eran realmente específicos y difíciles de describir.

Aquí está la solución que estaba buscando.

Las otras respuestas aquí, si bien pueden haber sido soluciones para el problema mal descrito, no eran lo que estaba buscando.

http://jsfiddle.net/vfezJ/

Por desgracia, el código sortable.js es muy peludo lo que el código vinculado también es muy peludo. La solución que he publicado también hace algunas suposiciones sobre las clases de CSS y los identificadores DOM para hacer el trabajo.

Answer 2

no estoy seguro de si he entendido bien, pero aquí es lo que ocurrió:

http://jsfiddle.net/py3DE/

$(".source .item").draggable({ revert: "invalid", appendTo: 'body', helper: 'clone', 
    start: function(ev, ui){ ui.helper.width($(this).width()); }     // ensure helper width 
}); 

$(".target .empty").droppable({ tolerance: 'pointer', hoverClass: 'highlight', 
    drop: function(ev, ui){ 
     var item = ui.draggable; 
     if (!ui.draggable.closest('.empty').length) item = item.clone().draggable();// if item was dragged from the source list - clone it 
     this.innerHTML = '';              // clean the placeholder 
     item.css({ top: 0, left: 0 }).appendTo(this);        // append item to placeholder 
    } 
}); 

Supuestos:

• Si arrastra elemento de la lista superior: se "clonará" (el original permanecerá en la lista)
• If yo u arrastre elemento de la lista inferior - se moverá (dejando marcador de posición vacío)
• Si se le cae cualquier punto del marcador de posición de una lista abajo - se reemplazará el marcador de posición
• Si se le cae cualquier punto del marcador de posición no vacía de la lista de abajo/artículo - lo reemplazará
• tamaños de ambas listas siempre permanecen igual

Déjame saber si esto ayuda o está usted buscando otra cosa. también explicar toda la tarea (¿cuál es el propósito de este arrastre) podría ayudar :-)

Answer 3

http://jsbin.com/igozat/2

Aquí es algo que nos prepararon rápidamente. No es perfecto o merece mucho crédito porque no se puede intercalar ordenable() a la mitad del arrastre. Si eso fuera posible, una acción de caída podría hacerse cargo por completo.Además, mi intento de reordenar fue con errores. Sé que este método funciona solo con jQuery normal, pero no funcionó con jQuery UI.

A riesgo de sonar como un idiota, si fuera yo, escribiría la funcionalidad con solo jQuery. jQuery UI no está todo bien. : P