用鼠标拖动移动DIV

Question

我需要用户能够在点击并按住鼠标的情况下将一个div向左或向右移动，其中div的位置将等于鼠标被按下时的x轴位置。我知道这个问题以前已经得到了回答，但我似乎无法使其工作。我正在使用一个简化版本，因此除了将“hello”显示在控制台中之外，div不会移动。非常感谢任何帮助。

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

当我点击div时，控制台输出"true"，当我释放鼠标时，控制台输出"false"。但是我无法获取控制台输出"hello"。

- Normajean

---

你尝试过为dragend事件添加事件监听器吗？或许可以针对相关的div进行操作：document.addEventListener('dragend', function (event) { /* ... */ }); - Agi Hammerthief

Answer 1

你在回调函数内创建了新变量。删除var即可正常工作:

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

请点击此链接了解有关作用域的更多信息 MDN上var语句的说明

- Sang Dang

Answer 2

我想你是在寻找类似这样的东西，

   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

的内容与编程有关。

- TechGuy