ondrop влияет на родителя цели

Question

У меня есть один div в другом div. Оба div имеют свойство ondrop. Когда я перемещаю элемент в dropzone ребенка, он дважды вызывает функцию ondrop. Один раз для ребенка, а затем еще один для родителя.

Моя проблема: даже если цель перетаскивания находится в другом контейнере-контейнере сбрасывания, я не хочу, чтобы на контейнер повлиял выпавший элемент. Другими словами, я не хочу, чтобы событие ondrop запускалось дважды.

Вы можете мне помочь?

Спасибо, Стефан

Answer 1

Вы можете остановить распространение события Э.Г.

event.stopPropagation(); 

Это остановит распространение drop события на родительские элементы.

P.S. Некоторый код не повредит.

Answer 2

В случае, если вы используете JQuery - вы должны использовать greedy опционам droppable объекта:

$("#draggable").draggable(); 
 
$("#droppable").droppable({ 
 
    greedy: true, 
 
    drop: function(e) { 
 
    alert("dropped inner"); 
 
    } 
 
}); 
 
$("#droppable-big").droppable({ 
 
    greedy: true, 
 
    drop: function(e) { 
 
    alert("dropped"); 
 
    } 
 
});

#draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ccc; 
 
} 
 
#droppable-big { 
 
    width: 120px; 
 
    height: 120px; 
 
    background: red; 
 
    color: #fff; 
 
    padding: 60px; 
 
} 
 
#droppable { 
 
    width: 75px; 
 
    height: 75px; 
 
    background: #999; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="draggable">Drag me</div> 
 
<div id="droppable-big"> 
 
    <div id="droppable">Drop here</div> 
 
</div>