предотвращать перетаскиваемые объекты добавляются несколько раз jQuery

Question

Я не могу понять, как предотвратить добавление перетаскиваемых объектов несколько раз в одно событие перетаскивания. Я сделал небольшой пример, где вы можете создать проблему.

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

перетащить фиолетовую блок в левом верхнем углу зеленого блока.

Answer 1

Я думаю, что вы просто хотите, чтобы удалить слово clone:

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

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

Answer 2

У вас есть несколько Droppable родственного DIVS друг на друг. Когда вы нажмете на один из них, то под ним тоже активируются.

Если вы сделали их вложенными, вы можете использовать опцию greedy: true. Но в этом случае, так как ваши divs - все братья и сестры, вы не можете действительно много сделать.

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

Смотрите здесь - Jquery droppable - Greedy not working as expected.