Question

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

这里是mousemove处理程序（被拖动的元素是＆＃34; overlay＆＃34;）：

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

这里是＆＃34; overlay＆＃34;

的html

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

和css：

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

似乎默认拖动动作显示，这是＆＃34; overlay＆＃34;的阴影。用鼠标移动。但元素本身并没有移动。

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

以下是另一种方法。 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);

Answer 2

jQuery是你的选择吗？由于代码已经存在，它使您正在做的事情变得非常简单。

http://jqueryui.com/demos/draggable/

演示：http://jsfiddle.net/wfbY8/4/

JavaScript代码

window.onload = addListeners;

function addListeners(){
    document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

}

function mouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e){
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
    var div = document.getElementById('dxy');
  div.style.position = 'absolute';
  div.style.top = e.clientY + 'px';
  div.style.left = e.clientX + 'px';
}

Answer 3

几周前，我确实为Angular see here做了类似的事情。它可能对你有所帮助。

基本上，我想做一些你可能正在考虑做的事情，但是要使用拖动事件你还需要删除你拖动的元素（至少这是我最终搜索的内容）。因此，如果您只想拖动/移动元素，则需要使用top，bottom和left，right样式在页面上设置其位置。因此，这些元素必须理想地位于fixed或absolute。

然后你去寻找它的核心，即计算你要移动元素的向量。由于mousemove事件仅调度使您可以访问鼠标坐标的MouseEvent，因此您可以计算鼠标移动的向量并使用相同的向量移动元素。

基本上我所做的是（希望在ES5中可以理解）：

var elementPosition = [0,0];
var mousePosition   = [0,0];
var element         = document.getElementById('yourElement');

var mainEH = function (event) {
    mousePosition = [event.clientX, event.clientY];
    document.addEventListener('mousemove', calcEH);
    document.addEventListener('mouseup', removeHandlers);
    document.addEventListener('contextmenu', removeHandlers);
};

var calcEH = function (event) {
    var vector      = [-mousePosition[0] + event.clientX, -mousePosition[1] + event.clientY];
    mousePosition   = [mousePosition[0] + vector[0], mousePosition[1] + vector[1]];
    elementPosition = [elementPosition[0] + vector[0], elementPosition[1] + vector[1]];
    updatePosition();
};

var removeHandlers = function () {
    document.removeEventListener('mousemove', calcEH);
    document.removeEventListener('mouseup', removeHandlers);
    document.removeEventListener('contextmenu', removeHandlers);
};

function updatePosition() {
    element.style.left = elementPosition[0] + "px";
    element.style.top  = elementPosition[1] + "px";
}

element.addEventListener('mousedown', mainEH, true);

我不确定这个确切的代码是否正常工作，因为我现在无法测试它，但您可以看到here我是如何使用angular进行此操作的。希望它能为你效劳。至少你明白了。无论如何，您可能需要运行一些为您设置元素初始位置的函数。

<强>更新

我刚才意识到这并不是你想要的。如果我理解正确你想要在拖放时移动整个元素。但是我可能会在这里留下答案，因为解决方案可能非常相似。我可能会通过使用我之前发布的逻辑来实现它，并且实际上能够移动元素我将它的位置设置为绝对而mousemove事件被触发，然后在mouseup上你可以删除位置绝对属性。

Answer 4

这里是拖动项目的示例。
对于css，我们需要position: absolute
对于js，请在完成拖动后删除onmouseup和onmousemove事件

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .AB {
      background: red;
      position: absolute;
      width: 100px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div id="A" class="AB"></div>

  <script type="text/javascript">
    var divA = document.getElementById("A");

    divA.addEventListener('mousedown', function() {
      startDrag();
    });

    function startDrag() {
      document.onmouseup = finishDrag;

      document.onmousemove = function(e) {
        divA.style.top = (divA.offsetTop + e.movementY) + "px";
        divA.style.left = (divA.offsetLeft + e.movementX) + "px";
      }
    }

    function finishDrag() {
      document.onmouseup = null;
      document.onmousemove = null;
    }
  </script>
</body>
</html>

javascript使用拖动来移动元素

4 个答案: