CODEWITHSUNDEEP
jqueryjquery-ui
Masih
Masih

Reputation: 1710

No repetitive jQuery UI droppable

I am trying to make a shopping cart kinda thing using jQuery UI drag 'n drop functionality. See this: https://jsfiddle.net/m3x1k8Lu/ My question is how i can avoid having repetitive items. I want to make a limitation so that no one can add more that one L2 to the cart. 

$( "#relations ol" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "ui-state-hover",
  accept: ":not(.ui-sortable-helper)",
  drop: function( event, ui ) {
    $( this ).find( ".placeholder" ).remove();
    $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
  }

Thanks

Upvotes: 3

Views: 43

Answers (1)

ggzone
ggzone

Reputation: 3711

Here the updated fiddle: https://jsfiddle.net/m3x1k8Lu/1/

We only accept a specific class, and removing it from the draggable when it is dropped:

accept: ".special",
drop: function (event, ui) {
  $(ui.draggable).removeClass('special');

The problem is I had to remove the selector: :not(.ui-sortable-helper) from the accept event. You have to figure out how to use multiple selectors with this format

Upvotes: 1

Related Questions