2010-09-08 15 views
12

¿Alguien sabe si la ordenación de jQuery UI tiene funcionalidad incorporada para mantener el elemento original caído en su lista original?jQuery ordenable - Guárdelo en la lista original

Por ejemplo, tiene dos listas (una 'fuente' y un 'grupo'). Me gustaría seleccionar de la fuente y soltar en el grupo, pero mantener el elemento en la fuente.

¿Tiene sentido?

¡Gracias!

Respuesta

22

Puede see my solution in action on jsfiddle. Simplemente modifiqué this jQuery draggable/droppable interaction para satisfacer sus necesidades.

HTML

<div class="demo"> 
    <h2>List 1</h2> 
    <ul> 
     <li class="draggable ui-state-highlight">Drag me down</li> 
     <li class="draggable ui-state-highlight">Drag me down</li> 
    </ul> 
    <h2>List 2</h2> 
    <ul id="sortable"> 
     <li class="ui-state-default">Item 1</li> 
     <li class="ui-state-default">Item 2</li> 
     <li class="ui-state-default">Item 3</li> 
     <li class="ui-state-default">Item 4</li> 
     <li class="ui-state-default">Item 5</li> 
    </ul> 
</div> 

jQuery

$(function() { 
    $("#sortable").sortable({ 
     revert: true 
    }); 
    $(".draggable").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 
    $("ul, li").disableSelection(); 
}); 

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 20px; } 
.demo li { margin: 5px; padding: 5px; width: 150px; border: 1px solid black; } 
+0

Yo estoy de paso .. 1 para una pequeña demostración agradable y limpio s olución. – rlemon

+0

Como este, ¿me falta algo cuando se trata de deshacerse de un elemento clonado? Me imagino que simplemente lo moverán de vuelta a la lista desde la que se originó, pero sería bueno si no muestra duplicados. – daveomcd

+1

@daveomcd ¿ha encontrado una forma de eliminar el elemento clonado? – Helpha

Cuestiones relacionadas