I need help because I can't make double clicking drop the element.
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>What is my mistake?
If I put
lista.onclick = function () {
document.removeEventListener("mousemove", onMouseMove);
It works but I want double click and I don't know how I can do it.
The solution below works for me.
I moved the functions moveAt and onMouseMove and lista.ondblclick outside the scope of of the lista.onclick method, and also added a boolean, locked so that the event listener is only added and removed when it is not locked / locked respectively:
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);
}
}