前端如何实现一个可拖拽的按钮 转

chatgpt的答案  https://chat.forchange.cn/ 

 

 

// 获取按钮元素
var btn = document.getElementById("dragBtn");
// 定义变量，用于记录鼠标在按钮上的偏移量
var offsetX = 0;
var offsetY = 0;
// 给按钮元素添加 mousedown 事件监听器
btn.addEventListener("mousedown", function(event) {
  // 计算鼠标在按钮上的偏移量
  offsetX = event.clientX - btn.offsetLeft;
  offsetY = event.clientY - btn.offsetTop;
  // 给文档添加 mousemove 事件监听器
  document.addEventListener("mousemove", onDrag);
});
// 定义拖拽事件处理函数
function onDrag(event) {
  // 计算按钮应该移动到的位置
  var left = event.clientX - offsetX;
  var top = event.clientY - offsetY;
  // 更新按钮的位置
  btn.style.left = left + "px";
  btn.style.top = top + "px";
}
// 给文档添加 mouseup 事件监听器
document.addEventListener("mouseup", function() {
  // 移除 mousemove 事件监听器
  document.removeEventListener("mousemove", onDrag);
});