javascript 使用拖动来移动元素

Question

如何设置元素的位置？当用户拖动元素（图像）时，我希望它同步移动。我看到正在调用我的“mousemove”处理程序。但是我无法让元素实际移动。

这是 mousemove 处理程序（被拖动的元素是“overlay”）：

function handleMouseMove (event)
{
  var deltaX = event.movementX;
  var deltaY = event.movementY;

  var divOverlay = document.getElementById ("overlay");
  var rect = divOverlay.getBoundingClientRect();

  divOverlay.style.left = rect.x + deltaX;
  divOverlay.style.top = rect.y + deltaY;
}

这是“叠加”的 html：

<div id="overlay">
  ... some other stuff ...
  <img id="large" src="something.jpg" >
</div>

和CSS：

#overlay {position:absolute; left:0; top:0}

似乎默认的拖动动作出现了，这是一个随鼠标移动的“叠加”阴影。但是元素本身不会移动。

Answer 1

不确定您的实际实施情况。但是，此代码有效：

要使用您的代码执行此操作，这是代码。您的代码的一个明显问题是您需要在 style.left 和 style.right 中添加“px”。此外，您实际上如何处理代码中的事件也是未知的。使用此代码，元素在一个圆圈中移动，您需要修复它，但您明白了。

var divOverlay = document.getElementById ("overlay");
var isDown = false;
divOverlay.addEventListener('mousedown', function(e) {
    isDown = true;
}, true);

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

document.addEventListener('mousemove', function(event) {
   event.preventDefault();
   if (isDown) {
   var deltaX = event.movementX;
   var deltaY = event.movementY;
  var rect = divOverlay.getBoundingClientRect();
  divOverlay.style.left = rect.x + deltaX + 'px';
  divOverlay.style.top  = rect.x + deltaX + 'px';
 }
}, true);

下面是另一种方法。 代码笔示例

var offset = [0,0];
var divOverlay = document.getElementById ("overlay");
var isDown = false;

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

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

document.addEventListener('mousemove', function(e) {
    event.preventDefault();
    if (isDown) {
        divOverlay.style.left = (e.clientX + offset[0]) + 'px';
        divOverlay.style.top  = (e.clientY + offset[1]) + 'px';
   }
}, true);