如何使按钮在 html 中可拖动？答案

【问题标题】：How do I make a button draggable in html?如何使按钮在 html 中可拖动？
【发布时间】：2021-03-08 19:44:08
【问题描述】：

所以我有这个代码：

<!DOCTYPE html>
<html>
    <script>
        score = 0
        function hi(buttonID){
            score += 1
            document.getElementById("label123").innerHTML = score
        }
    </script>
    <button onclick="hi(this)" id="Button123">
        <img src="button.png" alt="Button" width="100px" height="100px" draggable="true">
    </button>
    <label id="label123">Click it!</label>
    <h1> clicker.io </h1>
</html>

我想让按钮 (Button123) 可拖动。这将使用户能够体验到将按钮移动到屏幕上任何他们想要的位置的能力。

【问题讨论】：

首先将您的按钮放在一个 div 中，然后点击链接 Make Div Draggable using CSS

标签： javascript html button draggable

【解决方案1】：

我的旧的、滞后的解决方案（在 Firefox 上至少 4 FPS）

var btn = document.getElementById("btn");
function drag(e) {
  btn.style.left = `${e.pageX - 10}px`;
  btn.style.top = `${e.pageY - 10}px`;
}
btn.addEventListener("mousedown", () =>
  document.addEventListener("mousemove", drag)
);
btn.addEventListener("mouseup", () =>
  document.removeEventListener("mousemove", drag)
);

#btn {
  position: absolute;
}

&lt;button id="btn"&gt;Button&lt;/button&gt;

使用transform: translate() 的新解决方案（Firefox 上最低 40 FPS）

var btn = document.getElementById("btn");
function drag(e) {
  btn.style.transform = `translate(${e.pageX - 20}px, ${e.pageY - 20}px)`;
}
btn.addEventListener("mousedown", () =>
  document.addEventListener("mousemove", drag)
);
btn.addEventListener("mouseup", () =>
  document.removeEventListener("mousemove", drag)
);

&lt;button id="btn"&gt;Button&lt;/button&gt;

【讨论】：