Tengo un sitio web que arrastra un elemento a una zona de colocación. El problema es que cuando sueltas un elemento, muchas cosas en el back-end tienen que actualizarse. Debido a esto, la posición del cursor no se actualizará hasta que mueva el cursor.
Este tipo de JSFiddle reproduce el problema
Cuando arrastra la línea hasta el div inferior y no mueve el cursor, todavía piensa que la ubicación del cursor está en el lugar original antes de arrastrar, por lo que el cursor aún se muestra rojo. Una vez que mueves el cursor, se actualiza.
Este es el código:
HTML:
<div id="div1"> <li draggable="true" ondragstart="drag(event)">Drag this line</li> </div> <br><br /> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>CSS:
#div1, #div2 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } li:hover { background-color: red; }JS:
function allowDrop(ev) { ev.dataTransfer.dropEffect = 'link' ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { var data = ev.dataTransfer.getData("Text"); var lag = 0 //This just simulates a lot of things going on, not really real code for (i = 0; i < 500; i++) { lag += i lag /= 2 console.log(lag) } ev.target.innerHTML = "If you don't move your mouse, it'll still be hovering over the line, if you move the mouse it updates" ev.preventDefault(); }EDITAR: lo intenté
html.busy, html.busy * { cursor: wait !important; } en el CSS Esto solucionó el problema, pero en algunos momentos raros no funciona y tampoco funciona cuando tienes una window.alert() cuando la sueltas, que se muestra aquí
Creo que es mejor que uses dragend o dragleave event listener. no :hover .
Vea la diferencia mientras lo prueba.
dragend funcionará de la manera que quieras. Sin embargo, si arrastra el li a un lugar que no sea div2 , regresa y luego desaparece el color rojo.
item.addEventListener('dragend', function () { this.classList.remove('hover'); }); dragleave eliminará el color rojo cuando el mouse deje el elemento li original.
item.addEventListener('dragleave', function () { this.classList.remove('hover'); });Aquí está JSFiddle .
Anoté los dos códigos. Suelta uno por uno y mira la diferencia.
document.querySelectorAll("#div1 li").forEach(function (item) { item.addEventListener("mouseenter", function () { this.classList.add("hover"); }); item.addEventListener("mouseleave", function () { this.classList.remove("hover"); }); item.addEventListener("dragend", function () { this.classList.remove("hover"); }); /** If you use dragleave, red color will disappeared when you leave original li element. */ /* item.addEventListener('dragleave', function () { this.classList.remove('hover'); }); */ }); function allowDrop(ev) { ev.dataTransfer.dropEffect = "link"; ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { var data = ev.dataTransfer.getData("Text"); var lag = 0; //This just simulates a lot of things going on, not really real code for (let i = 0; i < 500; i++) { lag += i; lag /= 2; console.log(lag); } /* window.alert("just another lag") */ ev.target.innerHTML = "If you don't move your mouse, it'll still be hovering over the line, if you move the mouse it updates"; ev.preventDefault(); } #div1, #div2 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } .hover { background-color: red; } <div id="div1"> <li draggable="true" ondragstart="drag(event)">Drag this line</li> </div> <br><br /> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>