Javascript 用鼠标拖动移动DIV
我需要用户能够在单击并按住鼠标时向左或向右移动div,其中div的位置将等于按住鼠标时鼠标的x位置。我知道这个问题以前已经被回答过了,但我似乎无法让它起作用。我正在使用一个简化的版本,这样就不用移动div,而只需在控制台中显示“hello”。非常感谢您的帮助Javascript 用鼠标拖动移动DIV,javascript,Javascript,我需要用户能够在单击并按住鼠标时向左或向右移动div,其中div的位置将等于按住鼠标时鼠标的x位置。我知道这个问题以前已经被回答过了,但我似乎无法让它起作用。我正在使用一个简化的版本,这样就不用移动div,而只需在控制台中显示“hello”。非常感谢您的帮助 var divEl = document.getElementById("div"); var down = false; divEl.addEventListener('mousedown', function (event) {
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”控制台日志。我想你看起来像这样
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);
您在回调函数中创建了新变量。移除
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);
阅读此链接中有关作用域的更多信息是否尝试为添加事件侦听器,可能是添加到相关div?:`document.addEventListener('dragend',function(event){/*…*/});