js 拖拽可视化 图控件

// 获取需要拖拽的元素
const dragElement = document.getElementById('draggable');

let offsetX, offsetY;

dragElement.addEventListener('mousedown', (e) => {
  // 计算鼠标相对于元素的偏移量
  offsetX = e.clientX - dragElement.getBoundingClientRect().left;
  offsetY = e.clientY - dragElement.getBoundingClientRect().top;
  
  // 添加鼠标移动和松开事件监听器
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  // 更新元素位置
  dragElement.style.left = `${e.clientX - offsetX}px`;
  dragElement.style.top = `${e.clientY - offsetY}px`;
}

function onMouseUp() {
  // 移除事件监听器
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}