ondrop affecte le parent de la cible

Question

J'ai un div dans un autre div. Les deux div possèdent une propriété ondrop. Lorsque je déplace un élément dans la zone de dépôt de l'enfant, il appelle deux fois la fonction ondrop. Une fois pour l'enfant et une de plus pour le parent.

Mon problème est le suivant: Même si la cible de dépôt est dans un autre conteneur de destination, je ne souhaite pas que le conteneur soit affecté par l'élément abandonné. En d'autres termes, je ne veux pas que l'événement ondrop soit renvoyé deux fois.

Pouvez-vous m'aider?

Merci, Stefan

Answer 1

Vous pouvez arrêter la propagation des événements Par ex

event.stopPropagation(); 

Ceci empêchera la propagation d'événement drop à des éléments parents.

P.S. Un code ne fera pas de mal.

Answer 2

Si vous utilisez jQuery - vous devez utiliser l'option greedy de l'objet 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>