js如何实现拖动

实现拖动的步骤如下：

1. 获取需要拖动的元素，给它添加鼠标按下事件；
2. 在鼠标按下事件中，记录鼠标按下的位置和被拖动元素的位置；
3. 给文档添加鼠标移动事件和鼠标松开事件；
4. 在鼠标移动事件中，计算鼠标移动的距离，更新被拖动元素的位置；
5. 在鼠标松开事件中，移除鼠标移动事件和鼠标松开事件。

代码示例：

// 获取拖动元素
var draggable = document.getElementById('draggable');

// 记录鼠标按下位置和拖动元素位置的初始值
var startX, startY, offsetX = 0, offsetY = 0;

// 鼠标按下事件
draggable.addEventListener('mousedown', function(e) {
  startX = e.clientX;
  startY = e.clientY;
  offsetX = draggable.offsetLeft;
  offsetY = draggable.offsetTop;
  
  // 添加文档的鼠标移动事件和鼠标松开事件
  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('mouseup', upHandler);
});

// 鼠标移动事件
function moveHandler(e) {
  var dx = e.clientX - startX;
  var dy = e.clientY - startY;
  draggable.style.left = offsetX + dx + 'px';
  draggable.style.top = offsetY + dy + 'px';
}

// 鼠标松开事件
function upHandler(e) {
  document.removeEventListener('mousemove', moveHandler);
  document.removeEventListener('mouseup', upHandler);
}