CODEWITHSUNDEEP
jquerydrag-and-drop
Val
Val

Reputation: 17522

jquery drag and drop

I have the following...

<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>

I need to drag each item from one ul to another, but avoid duplications in the same ul and just add the item to the dropped ul.

using jQuery i have tried many things but there is always something that messes it up.

any ideas ? thnx

Upvotes: 1

Views: 3707

Answers (3)

jargalan
jargalan

Reputation: 5194

try to remove duplications before add

$( "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 );
 }
})

Upvotes: 0

hybernaut
hybernaut

Reputation: 636

This is complicated because you have multiple sortables and it's tricky to get working. I have done it using the sortable controller with the connectTo option specifying the other possible targets.

Upvotes: 0

Breezer
Breezer

Reputation: 10490

you could use the jqueryui http://jqueryui.com/demos/sortable/

makes it very easy to dragdrop/resize/drop...

Upvotes: 1

Related Questions