'I want when I make double click the element drop

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.

javascripthtml


Solution 1:[1]

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);
    }      
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions