jquery перетаскивание

Question

У меня есть следующее ...

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Мне нужно перетащить каждый элемент из одного ul в другой, но избегать дублирования в одном и том же ul и просто добавить элемент в выпадающийul.

используя jQuery Я пробовал много вещей, но всегда есть что-то, что испортило.

Есть идеи?thnx

Answer 1

вы можете использовать jqueryui http://jqueryui.com/demos/sortable/

позволяет легко перетаскивать / изменять размер / опускать ...

Answer 2

попробуйте удалить дубликаты перед добавлением

$( "li" ).draggable({
 appendTo: "ul",
 helper: "clone"
});
$( "ul" ).droppable({
 activeClass: "ui-state-default",
 hoverClass: "ui-state-hover",
 accept: ":not(.ui-sortable-helper)",
 drop: function( event, ui ) {
  $( this ).find( "li:contains('" + ui.draggable.text()  + "')" ).remove();

  $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
 }
})

Answer 3

Это сложно, потому что у вас есть несколько сортируемых элементов, и сложно работать. Я сделал это, используя сортируемый контроллер с опцией connectTo, указывающей другие возможные цели.