Actualmente estoy trabajando en una lista de reordenación de arrastrar y soltar con reaccionar y me encontré con algunos problemas de rendimiento debido a la repetición innecesaria de los elementos de la lista. Para resumir, está siendo causado por numerosos eventos secundarios (dragleave, dragenter) que se activan mientras se arrastra el elemento principal sobre el elemento secundario (control de arrastre) cuando ni siquiera he arrastrado el componente principal fuera de sí mismo. Lo ideal sería encontrar una forma de hacer que el elemento secundario forme parte del elemento principal en el sentido de sus límites de arrastre. Cuando arrastro el elemento principal sobre su elemento secundario, el evento dragenter no debe activarse para el elemento secundario y el evento dragleave no debe activarse para el elemento principal, y viceversa en sentido contrario. Estos eventos solo deberían activarse cuando me muevo por el borde del componente principal.
He intentado con "eventos de puntero: ninguno" y stopPropagation, pero ninguno de ellos funciona para mí, ya que tengo un controlador de mousedown en el div secundario que hace que el elemento principal se pueda arrastrar, lo que ya no funciona sin los eventos de puntero establecidos en ninguno.
Aquí hay un código de ejemplo:
HTML
<!DOCTYPE html> <html> <body> <div class="container"> <div class="child"> Drag Me </div> </div> </body> </html>JavaScript
const container = document.querySelector(".container"); const child = document.querySelector(".child"); child.addEventListener("mousedown", (e) => { container.setAttribute("draggable", "true"); }) child.addEventListener("mouseup", (e) => { container.setAttribute("draggable", "false"); }) container.addEventListener("dragend", (e) => { container.setAttribute("draggable", "false"); }) container.addEventListener("dragenter", (e) => { console.log(`dragenter ${e.target.className}`); }) container.addEventListener("dragleave", (e) => { console.log(`dragleave ${e.target.className}`); })Aquí hay un jsfiddle para demostrar: https://jsfiddle.net/d1videbyzero/x21jL3fa/75/
Toda ayuda es apreciada.