在本机javascript中创建一个可拖动的div [英] Create a draggable div in native javascript

问题描述

我想在本机javascript中创建一个可移动/可拖动的div而不使用jquery和库。是否有教程或任何标志？

I want to create a movable/draggable div in native javascript without using jquery and libraries. Is there a tutorial or anythign?

推荐答案

好的，这是我用于轻量级部署的个人代码（使用库的项目）由于某种原因，不允许或过度杀伤）。首先，我总是使用这个便利功能，以便我可以传递一个id或实际的dom元素：

OK, here's my personal code that I use for lightweight deployments (projects where using a library is either not allowed or overkill for some reason). First thing first, I always use this convenience function so that I can pass either an id or the actual dom element:

function get (el) {
  if (typeof el == 'string') return document.getElementById(el);
  return el;
}

作为奖励， get（）比 document.getElementById（）更短，我的代码缩短了。

As a bonus, get() is shorter to type than document.getElementById() and my code ends up shorter.

秒意识到大多数库正在做的是跨浏览器兼容性。如果所有浏览器的行为相同，则代码相当简单。因此，让我们编写一些跨浏览器函数来获取鼠标位置：

Second realize that what most libraries are doing is cross-browser compatibility. If all browsers behave the same the code is fairly trivial. So lets write some cross-browser functions to get mouse position:

function mouseX (e) {
  if (e.pageX) {
    return e.pageX;
  }
  if (e.clientX) {
    return e.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  }
  return null;
}

function mouseY (e) {
  if (e.pageY) {
    return e.pageY;
  }
  if (e.clientY) {
    return e.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  }
  return null;
}

好的，上面的两个函数是相同的。编写它们肯定有更好的方法，但我现在保持它（相对）简单。

OK, the two functions above are identical. There're certainly better ways to write them but I'm keeping it (relatively) simple for now.

现在我们可以编写拖放代码了。我喜欢这个代码的东西是在一个闭包中捕获所有内容，因此没有全局变量或辅助函数乱丢浏览器。此外，代码将拖动手柄与被拖动的对象分开。这对于创建对话框等非常有用。但如果不需要，您始终可以为它们分配相同的对象。无论如何，这是代码：

Now we can write the drag and drop code. The thing I like about this code is that everything's captured in a single closure so there are no global variables or helper functions littering the browser. Also, the code separates the drag handle from the object being dragged. This is useful for creating dialog boxes etc. But if not needed, you can always assign them the same object. Anyway, here's the code:

function dragable (clickEl,dragEl) {
  var p = get(clickEl);
  var t = get(dragEl);
  var drag = false;
  offsetX = 0;
  offsetY = 0;
  var mousemoveTemp = null;

  if (t) {
    var move = function (x,y) {
      t.style.left = (parseInt(t.style.left)+x) + "px";
      t.style.top  = (parseInt(t.style.top) +y) + "px";
    }
    var mouseMoveHandler = function (e) {
      e = e || window.event;

      if(!drag){return true};

      var x = mouseX(e);
      var y = mouseY(e);
      if (x != offsetX || y != offsetY) {
        move(x-offsetX,y-offsetY);
        offsetX = x;
        offsetY = y;
      }
      return false;
    }
    var start_drag = function (e) {
      e = e || window.event;

      offsetX=mouseX(e);
      offsetY=mouseY(e);
      drag=true; // basically we're using this to detect dragging

      // save any previous mousemove event handler:
      if (document.body.onmousemove) {
        mousemoveTemp = document.body.onmousemove;
      }
      document.body.onmousemove = mouseMoveHandler;
      return false;
    }
    var stop_drag = function () {
      drag=false;      

      // restore previous mousemove event handler if necessary:
      if (mousemoveTemp) {
        document.body.onmousemove = mousemoveTemp;
        mousemoveTemp = null;
      }
      return false;
    }
    p.onmousedown = start_drag;
    p.onmouseup = stop_drag;
  }
}

有一个轻微错综复杂的理由 offsetX / offsetY 计算。如果你注意到，它只是将鼠标位置之间的差异加回到被拖动的div的位置。为什么不直接使用鼠标位置？好吧，如果你这样做，当你点击它时，div会跳转到鼠标指针。这是我不想要的行为。

There is a reason for the slightly convoluted offsetX/offsetY calculations. If you notice, it's just taking the difference between mouse positions and adding them back to the position of the div being dragged. Why not just use the mouse positions? Well, if you do that the div will jump to the mouse pointer when you click on it. Which is a behavior I did not want.

这篇关于在本机javascript中创建一个可拖动的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！