javascript - Move DIV with mouse drag - Stack Overflow

admin管理员组

文章数量:1391928

I need the user to be able to move a div to the left or right when they click and hold and move the mouse, where the position of the div will be equal to the x position of the mouse when it's held down. I know this question has been answered before, but I can't seem to get it to work. I'm working with a simplified version, such that instead of the div moving, I just have "hello" display in the console. Any help is greatly appreciated.

var divEl = document.getElementById("div");

var down = false;

divEl.addEventListener('mousedown', function (event) {
    var down = true;
    console.log("true");
}, true);

window.addEventListener('mouseup', function (event) {
    var down = false;
    console.log("false");
}, true);


document.addEventListener('mousemove', function(event) {
  event.preventDefault();
    if (down) {

      console.log("hello");

    }
}, true);

When I click on the div, I get the "true" console log and when I release the mouse I get the "false" console log. But I can't get the "hello" console log.

I need the user to be able to move a div to the left or right when they click and hold and move the mouse, where the position of the div will be equal to the x position of the mouse when it's held down. I know this question has been answered before, but I can't seem to get it to work. I'm working with a simplified version, such that instead of the div moving, I just have "hello" display in the console. Any help is greatly appreciated.

var divEl = document.getElementById("div");

var down = false;

divEl.addEventListener('mousedown', function (event) {
    var down = true;
    console.log("true");
}, true);

window.addEventListener('mouseup', function (event) {
    var down = false;
    console.log("false");
}, true);


document.addEventListener('mousemove', function(event) {
  event.preventDefault();
    if (down) {

      console.log("hello");

    }
}, true);

When I click on the div, I get the "true" console log and when I release the mouse I get the "false" console log. But I can't get the "hello" console log.

• javascript

Share Improve this question Follow asked Nov 21, 2019 at 8:12 NormajeanNormajean 1,27533 gold badges1717 silver badges3434 bronze badges 1

• Have you tried adding an event listener for the dragend event, possibly to the div in question?: `document.addEventListener('dragend', function (event) { /* ... */ }); – Agi Hammerthief Commented Nov 21, 2019 at 8:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You created the new variable inside the callback function. Remove the var and it works:

var divEl = document.getElementById("div");

var down = false;

divEl.addEventListener('mousedown', function (event) {
    down = true;
    console.log("true");
}, true);

window.addEventListener('mouseup', function (event) {
    down = false;
    console.log("false");
}, true);


document.addEventListener('mousemove', function(event) {
  event.preventDefault();
    if (down) {
      console.log("hello");
    }
}, true);

Read more about scope at this link var statement at MDN

I think you're looking something like this,

   var mousePosition;
var offset = [0,0];
var div;
var isDown = false;

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "blue";

document.body.appendChild(div);

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = [
        div.offsetLeft - e.clientX,
        div.offsetTop - e.clientY
    ];
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown) {
        mousePosition = {

            x : event.clientX,
            y : event.clientY

        };
        div.style.left = (mousePosition.x + offset[0]) + 'px';
        div.style.top  = (mousePosition.y + offset[1]) + 'px';
    }
}, true);

JSFIDDLE

本文标签： javascriptMove DIV with mouse dragStack Overflow