How to select HTML elements with mouse down but be able to drag and move with the mouse in javaScript

Question

I want to be able to select/activate items with a mousedown, but also be able to move items around by dragging them without triggering a mousedown event. Is this possible? Right now I'm forced to use "click" instead so I can drag as well.

let container = document.querySelector("#container")

container.addEventListener("mousedown", () => {
  console.log("mousedown action")
})

container.addEventListener("dragstart", () => {
  console.log("drag start")
})

div {
  background-color: grey;
  color: white;
  width: 150px;
  border: 1px solid green;
  user-select: none;
}

<div id="container">
  <div draggable=true>Item 1</div>
  <div draggable=true>Item 2</div>
  <div draggable=true>Item 3</div>
  <div draggable=true>Item 4</div>
</div>

There are a few ideas here: https://stackoverflow.com/questions/6042202/how-to-distinguish-mouse-click-and-drag — imvain2, Jul 24 '23 at 22:31
Some ideas here as well: https://stackoverflow.com/questions/42988911/dragging-an-item-without-mousedown — Zak, Jul 24 '23 at 22:43
Browsers should always trigger 'mousedown' while the mouse is down. One solution to avoid user agent responses you don't want is, in your mousedown listener, check if a flag is set; if it's not, set the flag and a timer (using setTimeout) -- but if the flag is set (meaning the timer is running), explicitly tell the browser to do nothing (probably using event.preventDefault). Then when the timer expires, unset the flag.. — Cat, Jul 24 '23 at 23:03
I'm trying to use mousedown or click depending if multiple items are selected. If there are multiple items then ignore mousedown activation. — madprops, Jul 24 '23 at 23:22

Jerry · Answer 1 · 2023-07-26T10:03:47.317

Here you can try this logic for multiple boxes:

let ux = "",
        uy = "";
      let boxes = Array.from(document.querySelectorAll(".box"));

      let currentBox;

      boxes.map((boxElem) => {
        boxElem.addEventListener("mousedown", (ev) => {
          currentBox = ev.target;
          mouseDown(ev, currentBox);
        });
      });

      function mouseDown(ev, box) {
        ux = ev.clientX - box.offsetLeft;
        uy = ev.clientY - box.offsetTop;

        window.addEventListener("mousemove", move);
      }

      function move(ev) {
        if (!currentBox) return;

        currentBox.style.left = ev.clientX - ux + "px";
        currentBox.style.top = ev.clientY - uy + "px";
      }

      window.addEventListener("mouseup", remove);

      function remove() {
        window.removeEventListener("mousemove", move);
      }

.box {
      position: absolute;
      width: 200px;
      height: 100px;
      background-color: yellow;
    }

    #box1 {
      top: 0px;
    }

    #box2 {
      top: 110px;
    }
 
    #box3 {
      top: 250px;
    }

    #box4 {
      top: 400px;
    }

    #box5 {
      top: 540px;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box" id="box1"></div>
    <div class="box" id="box2"></div>
    <div class="box" id="box3"></div>
    <div class="box" id="box4"></div>
    <div class="box" id="box5"></div>
  </body>
</html>

How to select HTML elements with mouse down but be able to drag and move with the mouse in javaScript

1 Answers1