CODEWITHSUNDEEP
javascriptjquery
Richi
Richi

Reputation: 100

prevent draggable objects are added several times jQuery

I can't figure out how to prevent that draggable objects are added several times in one drag event. I made a small example where you can produce the problem.

https://jsfiddle.net/richiwarmen/afqu96v3/1/

$( ".draggableEl" ).droppable({
      accept: ".dropme",
      drop: function( event, ui ) {
        $(this).append(ui.draggable.clone().css("left","0px"));
      }});
$( ".draggableEl" ).draggable();

$( ".dropme" ).draggable({
     revert: 'invalid', 
     helper: "clone" ,
});

drag the purple block in the upper left of the green block, .

Upvotes: 1

Views: 34

Answers (2)

Patosai
Patosai

Reputation: 760

You have multiple droppable sibling divs on top of each other. When you drop onto one of them, the ones below it will also activate.

If you made them nested you could use the greedy: true option. But in this case since your divs are all siblings, you can't really do much about it.

Demo - https://jsfiddle.net/Patosai/afqu96v3/2/

See here - Jquery droppable - Greedy not working as expected.

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

I think you just want to remove the word clone:

$( ".draggableEl" ).droppable({
      accept: ".dropme",
      drop: function( event, ui ) {
        $(this).append(ui.draggable.css("left","0px"));
      }});
$( ".draggableEl" ).draggable();

$( ".dropme" ).draggable({
     revert: 'invalid',
});

Upvotes: 0

Related Questions