javascript 使用拖动来移动元素

Question

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

这是 mousemove 处理程序(被拖动的元素是“覆盖”):

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}

看起来默认的拖拽 Action 体现出来了，就是随着鼠标移动的“叠加”的影子。但是元素本身并没有移动。

Answer 1

不确定您的实际实现情况。但是这段代码有效:

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

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

---

下面是另一种方法。 Codepen example

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