1

So I have this code:

<!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>

And I want to make the button (Button123) draggable. This will make it so that the user can experience the ability to move the button anywhere they want on the screen.

Liam Hall
  • 43
  • 2
  • 9
  • first of all make your button in a div then follow the link [Make Div Draggable using CSS](https://stackoverflow.com/questions/13526712/make-div-draggable-using-css) – sainupangad Mar 08 '21 at 20:09

1 Answers1

1

My old, laggy solution (min 4 FPS on firefox)

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>

New solution using transform: translate() (min 40 FPS on firefox)

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>