prevent draggable objects are added several times jQuery

Question

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

Answer 1

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 .

Answer 2

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',
});