Cada vez que el usuario comienza a arrastrar un elemento con draggable="true" , el elemento tiene una copia translúcida del elemento que está arrastrando. Aquí está el ejemplo de W3Schools: dejar de iniciar la animación
El lado derecho de la foto es importante. Esa es la animación que obtienes cuando comienzas a arrastrar un elemento.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_ondrag
He intentado usar event.preventDefault() . Sin embargo, el problema aquí es que esto evita que onDrag mientras el elemento se está moviendo y necesito los datos (posición del mouse y demás) de onDrag .
Parece que hay publicaciones sobre cómo detener la animación cuando la sueltas pero no la inicias.
Saliendo del ejemplo en el sitio W3Schools, quiero la información de arrastre sin la animación ondragstart .
Entonces, si modifico el código agregando un preventDefault() en la función ondragstart :
function dragStart(event) { console.log(event); event.preventDefault(); //stops animation in right side of photo, but then won't let ondrag fire event.dataTransfer.setData("Text", event.target.id); } function dragging(event) { console.log(event); document.getElementById("demo").innerHTML = "The p element is being dragged"; } La animación que obtienes al arrastrar desaparece. Sin embargo (como se muestra en mis líneas console.log console.log) , el ondrag no se activará con este preventDefault en ondragstart . Esta es la información que necesito.
preventDefault dentro ondrag no detiene esa animación. ¿Es esto posible?
SOLUCIÓN Si alguien se pregunta, encontré lo que necesitaba hacer en este caso. Puede configurar la imagen en javascript a una transparente: ¿Cómo eliminar la imagen de arrastre (fantasma)? entonces, técnicamente, el arrastre aún se está ejecutando, pero esa imagen fantasmal se ha ido. No estaba pensando en los términos de búsqueda correctos.
En este caso, optaría por un enfoque diferente: https://codepen.io/deibl31/pen/oNeXmPE?editors=1111
// HTML <div id="myDiv"> </div> // CSS #myDiv { position: absolute; height: 100px; width: 100px; background: black; color: white; } // JS let myDiv = document.getElementById('myDiv'); let mouseDown = false; let divPos = {x: 0, y: 0}; myDiv.addEventListener('mousedown', (event) => { mouseDown = true; }); window.addEventListener('mousemove', (event) => { if (mouseDown) { divPos.x = event.clientX; divPos.y = event.clientY; } }); window.addEventListener('mouseup', (event) => { if (mouseDown) { myDiv.style.top = divPos.y + 'px'; myDiv.style.left = divPos.x + 'px'; } mouseDown = false; });