Necesito ayuda porque no puedo hacer doble clic para soltar el elemento.
var lista = document.getElementById("uno"); lista.onclick = function(event) { lista.style.position = 'absolute'; lista.style.zIndex = 1000; document.body.append(lista); function moveAt(pageX, pageY) { lista.style.left = pageX - lista.offsetWidth / 2 + 'px'; lista.style.top = pageY - lista.offsetHeight / 2 + 'px'; } moveAt(event.pageX, event.pageY); function onMouseMove(event) { moveAt(event.pageX, event.pageY); } document.addEventListener('mousemove', onMouseMove); lista.ondblclick = function() { document.removeEventListener("mousemove", onMouseMove); } }; .row1 { position: relative; } #uno { border: 1px solid black; width: 6vw; height: 10vh; background-color: blue; } <body> <div class="row1"> <div id="uno"></div> </div> <script src="scriptV\ejercicio3.js"></script> </body>¿Cuál es mi error?
si pongo
lista.onclick = function () { document.removeEventListener("mousemove", onMouseMove);Funciona pero quiero hacer doble clic y no sé cómo puedo hacerlo.
La solución a continuación funciona para mí. Moví las funciones moveAt y onMouseMove y lista.ondblclick fuera del alcance del método lista.onclick , y también agregué un booleano, locked para que el detector de eventos solo se agregue y elimine cuando no esté bloqueado/bloqueado respectivamente:
var lista = document.getElementById("uno"); let locked = false; function moveAt(pageX, pageY) { lista.style.left = pageX - lista.offsetWidth / 2 + 'px'; lista.style.top = pageY - lista.offsetHeight / 2 + 'px'; } function onMouseMove(event) { moveAt(event.pageX, event.pageY); } lista.onclick = function (event) { console.log("sng"); if(!locked){ console.log("not locked"); locked = true; lista.style.position = 'absolute'; lista.style.zIndex = 1000; document.body.append(lista); } moveAt(event.pageX, event.pageY); document.addEventListener('mousemove', onMouseMove); }; lista.ondblclick = function () { console.log("dbl") if(locked){ console.log("locked") locked = false; document.removeEventListener("mousemove", onMouseMove); } }