JavaScript鼠标拖放(Drag and Drop)

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

拖放是现代界面不可或缺的交互方式之一。本文将介绍如何用JavaScript来实现元素的拖放功能。

我们首先需要准备拖放事件,之后跟踪拖动过程中鼠标位置,计算元素的新坐标。我们也可以实现拖放目标,在元素ENTER和LEAVE 时做出响应。最后,可以在放置时传递数据。

掌握拖放接口不仅可以优化交互,也可以大展创意,制作游戏等应用。让我们开始学习拖放之旅吧!

✨ 正文

本文介绍 JavaScript 实现元素的拖放功能。

开始拖放

用于启动拖动的事件是 ondragstart:

ball.ondragstart = function() {
  return false; // 允许拖放
};

我们还需要 ondrag 事件来实现拖放过程中元素的移动。

在拖动过程中

ball.ondrag = function(event) { // 移动 ball 到新的坐标 ball.style.left = event.clientX + 'px'; ball.style.top = event.clientY + 'px'; };

通过事件对象的 clientX/clientY 属性获取鼠标坐标来移动被拖动元素。

实现目标放置

当拖动的元素进入目标元素时候,会触发目标元素的 ondragenter 事件:

target.ondragenter = function(event) {
  // 高亮目标元素 (change bg color)
  event.target.style.background = 'pink';
};

当拖动退出目标元素时,ondragleave 事件被触发。

最后元素松开鼠标时,会触发 ondrop 事件来执行放置操作。

数据传递

可以使用 event.dataTransfer 对象在拖动源(source)和放置目标(target)之间传递数据:

// 拖动源
ball.ondragstart = function(event) {
  event.dataTransfer.setData('text', 'ball data'); 
};

// 放置目标
field.ondrop = function(event) {
  let data = event.dataTransfer.getData('text');
  // Do something with the data
};

修正定位

在元素拖动代码示例中，球在移动时，球的中心始终位于鼠标指针下方：

ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = pageY - ball.offsetHeight / 2 + 'px';

不错，但这存在副作用。要启动拖放，我们可以在球上的任意位置 mousedown。但是，如果从球的边缘“抓住”球，那么球会突然“跳转”以使球的中心位于鼠标指针下方。

如果我们能够保持元素相对于鼠标指针的初始偏移，那就更好了。

例如，我们按住球的边缘处开始拖动，那么在拖动时，鼠标指针应该保持在一开始所按住的边缘位置上。

让我们更新一下我们的算法：

当访问者按下按钮（mousedown）时 —— 我们可以在变量 shiftX/shiftY 中记住鼠标指针到球左上角的距离。我们应该在拖动时保持这个距离。

我们可以通过坐标相减来获取这个偏移：
```
// onmousedown
let shiftX = event.clientX - ball.getBoundingClientRect().left;
let shiftY = event.clientY - ball.getBoundingClientRect().top;
```

然后，在拖动球时，我们将鼠标指针相对于球的这个偏移也考虑在内，像这样：

// onmousemove
// 球具有 position: absolute
ball.style.left = event.pageX - shiftX + 'px';
ball.style.top = event.pageY - shiftY + 'px';

能够更好地进行定位的最终代码：

ball.onmousedown = function(event) {

  let shiftX = event.clientX - ball.getBoundingClientRect().left;
  let shiftY = event.clientY - ball.getBoundingClientRect().top;

  ball.style.position = 'absolute';
  ball.style.zIndex = 1000;
  document.body.append(ball);

  moveAt(event.pageX, event.pageY);

  // 移动现在位于坐标 (pageX, pageY) 上的球
  // 将初始的偏移考虑在内
  function moveAt(pageX, pageY) {
    ball.style.left = pageX - shiftX + 'px';
    ball.style.top = pageY - shiftY + 'px';
  }

  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }

  // 在 mousemove 事件上移动球
  document.addEventListener('mousemove', onMouseMove);

  // 放下球，并移除不需要的处理程序
  ball.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
  };

};

ball.ondragstart = function() {
  return false;
};

以上介绍了拖放功能从准备到完成的完整流程。希望对大家实现拖放有帮助!