js实现div拖动效果【js实现拖动元素：代码示例】

温馨提示：这篇文章已超过288天没有更新，请注意相关的内容是否还可用！

在网页开发中，我们经常需要实现一些交互效果，比如拖动元素。今天我来给大家讲解一下如何使用JavaScript实现div拖动效果。

我们需要给要拖动的div元素添加一些事件监听器，以便在用户拖动时能够捕获相应的事件。我们可以使用鼠标按下事件（mousedown）来开始拖动，鼠标移动事件（mousemove）来实现元素的随鼠标移动，以及鼠标释放事件（mouseup）来结束拖动。

接下来，我们需要定义一些变量来保存鼠标按下时的初始位置，以及元素的初始位置。在鼠标按下事件中，我们可以使用event.clientX和event.clientY来获取鼠标按下时的坐标，然后将这些坐标保存到变量中。我们也需要获取元素的初始位置，可以使用element.offsetLeft和element.offsetTop来获取元素相对于其父元素的位置。

接下来，在鼠标移动事件中，我们可以通过计算鼠标的当前位置与初始位置的差值，来得到元素应该移动的距离。然后，我们可以使用element.style.left和element.style.top来设置元素的新位置，以实现元素的拖动效果。

在鼠标释放事件中，我们可以将保存初始位置的变量清空，以结束拖动。

下面是示例代码：


var element = document.getElementById("dragElement");
var initialX, initialY;
element.addEventListener("mousedown", function(event) {
  initialX = event.clientX - element.offsetLeft;
  initialY = event.clientY - element.offsetTop;
});
element.addEventListener("mousemove", function(event) {
  if (initialX && initialY) {
    var currentX = event.clientX - initialX;
    var currentY = event.clientY - initialY;
    element.style.left = currentX + "px";
    element.style.top = currentY + "px";
  }
});
element.addEventListener("mouseup", function() {
  initialX = null;
  initialY = null;
});