Cuando un div se puede arrastrar y pasamos el mouse sobre un div que ejecuta el comando dragenter y dragleave, nos enfrentamos a un problema cuando hay un niño presente dentro de ese div que ejecuta el comando dragleave como se muestra a continuación.
Ejemplo 1: aquí, cuando se pasa el cursor sobre el color secundario, desaparece.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<style>
.yellow {
background-color: yellow;
}
</style>
<body>
<div id="drag" draggable="true">Drag me</div>
<hr />
<div id="drop">
Drop here
<p>Child Element</p>
</div>
<script>
$("#drop").bind({
dragenter: function () {
$(this).addClass("yellow");
},
dragleave: function () {
$(this).removeClass("yellow");
},
});
$("#drag").bind({
dragstart: function (e) {
e.allowedEffect = "copy";
e.setData("text/plain", "test");
},
});
</script>
</body>
</html>
Salida: Como podemos ver, cuando se pasa el cursor sobre el elemento secundario, se ejecuta la función dragleave y, por lo tanto, el color desaparece.
Ejemplo 2: Para superar este problema, usamos un contador que ejecuta la función dragleave solo cuando el contador se convierte en cero. Aquí, cuando se pasa el cursor sobre el color del niño, no desaparece
Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<style>
.yellow {
background-color: yellow;
}
</style>
<body>
<div id="drag" draggable="true">Drag me</div>
<hr />
<div id="drop">
Drop here
<p>Child Elements</p>
</div>
<script>
var counter = 0;
$("#drop").bind({
dragenter: function (ev) {
ev.preventDefault();
counter++;
$(this).addClass("yellow");
},
dragleave: function () {
counter--;
if (counter === 0) {
$(this).removeClass("yellow");
}
},
});
$("#drag").bind({
dragstart: function (e) {
e.allowedEffect = "copy";
e.setData("text/plain", "test");
},
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por wanna_code y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA