Todavía intento combinar arrastrar y soltar y mover un elemento con el mouse . Tengo problemas con dragenter y dragleave que no se llama para un elemento principal cuando muevo el elemento secundario. Esto parece bastante natural porque el elemento siempre se desplaza sobre el elemento principal y evita que se llame a dragenter para el elemento principal.
Traté de llamar a stopPropagation() y preventDefault() en dragenter dragenter , dragleave , dragover , dragstart y drag para el elemento secundario, pero sin ningún efecto real.
Otra pregunta parece abordar un problema similar pero sin una solución real si lo obtengo correctamente.
Tal vez esté demasiado oscuro aquí abajo en la madriguera del conejo para ver lo obvio: ¿cómo evito que el elemento arrastrado evite que se dragleave dragenter sus padres?
En otro nivel, solo quiero saber si el elemento se ha colocado fuera del elemento principal (para luego devolverlo a su posición original). ¿Hay un enfoque más fácil?
Aquí está mi código actual : en el estado actual, el elemento se mueve con el mouse y, por lo tanto, evita que se llame dragleave dragenter
Desactivar el movimiento real de draggable_element hará que se llame a dragleave dragenter salir del área principal/objetivo, pero también cuando se ingrese el elemento arrastrado (lo que de alguna manera no puedo evitar).
Lo encontré: en lugar de jugar con los eventos de arrastrar/soltar, solo tiene que desactivar pointer-events para el elemento arrastrado para evitar eventos no deseados de dragenter / dragleave para el padre y volver a encenderlo después (tiene que estar activado de forma predeterminada para habilitar arrastrando en primer lugar).
draggable_element.addEventListener("dragstart", (e) => { e.srcElement.style.pointerEvents = "none"; ... // rest of code }); elem.addEventListener("dragend", (e) => { e.srcElement.style.pointerEvents = "auto"; ... // rest of code });Aquí hay un ejemplo de trabajo: https://jsfiddle.net/03a9s4ur/10/