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; }
Yo estoy de paso .. 1 para una pequeña demostración agradable y limpio s olución. – rlemon
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
@daveomcd ¿ha encontrado una forma de eliminar el elemento clonado? – Helpha