JavaScript原生拖放API详解：事件、DataTransfer与draggable属性

<!-- 禁止拖动图片 -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- 让元素可以拖动 -->
<div draggable="true">...</div>

<div id="draggable" draggable="true">Drag me!</div>

#draggable {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: move;
  position: absolute;
}

const draggableElement = document.getElementById('draggable');
let offsetX, offsetY;
draggableElement.addEventListener('dragstart', function (event) {
  // 拖动开始时计算鼠标位置与元素左上角的偏移，并记录
  offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = event.clientY - draggableElement.getBoundingClientRect().top;
});

draggableElement.addEventListener('drag', function (event) {
  // 计算元素应该移动到的位置
  const x = event.clientX - offsetX;
  const y = event.clientY - offsetY;
  // 更新元素位置
  draggableElement.style.left = x + 'px';
  draggableElement.style.top = y + 'px';
});

draggableElement.addEventListener('dragend', function (event) {
  const x = event.clientX - offsetX;
  const y = event.clientY - offsetY;
  // 拖动结束之后更新元素的位置
  draggableElement.style.left = x + 'px';
  draggableElement.style.top = y + 'px';
});