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

Question

所以我有这个代码：

<!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) 可以拖动。这将使用户能够体验在屏幕上任意位置移动按钮的能力。

Answer 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;
}

<button id="btn">Button</button>

使用 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)
);

<button id="btn">Button</button>

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

How do I make a button draggable in html?

html

javascript

button

draggable