Как сделать передвижение фигур на сайте JS

Question

Как сделать передвижение фигур на сайте JS

Рейтинг: 0Ответов: 1Опубликовано: 17.03.2023

Есть задача : пользователь мышкой нажимает на область монитора и на точке координат курсора рисуется круг. после этого сделать возможность мышкой двигать эти круги (менять их положение ) и координаты центров обновлять в таблице. Мой код HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <table class="TableStyle">
        <tr>
          <td>
            <label id="CoordinatesFirstPoint">Координати першої точки :</label>
          </td>
          <td>
            <input type="text" id="X1" />
            <input type="text" id="Y1" />
          </td>
          <td>
            <button>Reset</button>
          </td>
        </tr>
        <tr>
          <td>
            <label id="CoordinatesSecondPoint">Координати другої точки :</label>
          </td>
          <td>
            <input type="text" id="X2" />
            <input type="text" id="Y2" />
          </td>
          <td>
            <button>About</button>
          </td>
        </tr>
        <tr>
          <td>
            <label id="CoordinatesThirdPoint">Координати третьої точки :</label>
          </td>
          <td>
            <input type="text" id="X3" />
            <input type="text" id="Y3" />
          </td>
        </tr>
        <tr>
          <td>
            <label id="CoordinatesFourthPoint">Координати першої точки :</label>
          </td>
          <td>
            <input type="text" id="X4" />
            <input type="text" id="Y4" />
          </td>
        </tr>
      </table>
      <div id="app"></div>
      <div id="overlay"></div>
    </div>
  </body>
</html>

CSS :

        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        border: 3px solid crimson;
      }
      .circle {
        position: absolute;
        width: 10px;
        height: 10px;
        background: black;
        border-radius: 100%;
      }
      #overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.04);
      }

И сам JS:

const appDiv = document.getElementById("app");
      const CIRCLE_SIZE = 10;
      let count = 4;
      class Circle {
        constructor({ pageX, pageY, circleSize = CIRCLE_SIZE }) {
          const element = document.createElement("div");
          element.id = `circle${5 - count}`;
          element.className = "circle";
          element.style.top = `${pageY - circleSize / 2}px`;
          element.style.left = `${pageX - circleSize / 2}px`;
          this.element = element;
        }
        draw = (container) => {
          container.append(this.element);
        };
      }

      const overlay = document.querySelector("#overlay");
      overlay.addEventListener("click", (event) => {
        if (count !== 0) {
          var X = document.getElementById(`X${5 - count}`);
          var Y = document.getElementById(`Y${5 - count}`);
          X.value = event.pageX;
          Y.value = event.pageY;
          const { pageX, pageY } = event;
          const circle = new Circle({ pageX, pageY });
          circle.draw(appDiv);
          count--;
        }
      });

Мне осталось реализовать передвижение чорных кружков по монитору. Логику я понимаю как можно сделать. Например : HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="ball"></div>
  </body>
</html>

CSS

.ball{
    width: 50px;
    height: 50px;
    background-color: red;
    z-index: 20;
    position: absolute;
    border-radius: 50%;
}

JS

const ball = document.querySelector(".ball");

      ball.onmousedown = function (event) {
        function move(pageX, pageY) {
          ball.style.left = pageX - ball.offsetWidth / 2 + "px";
          ball.style.top = pageY - ball.offsetWidth / 2 + "px";
        }

        move(event.pageX, event.pageY);

        function onMouseMove(event) {
          move(event.pageX, event.pageY);
        }

        document.addEventListener("mousemove", onMouseMove);

        ball.onmouseup = function () {
          document.removeEventListener("mousemove", onMouseMove);
        };
      };

Как мне это реализовать в первом случаии

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Вам нужно определить по нажатию на какой кружок Вы нажали, а после создать навесить на него два события которые у Вас приведены для ball но через addEventListener причем при mouseup отписаться от них тоже как в вашем случае происходит отписка от mousemove. Т.е. связующее звено между вашими задачами — найти тот кружок на который нажали, для этого нужно воспользоваться например делегированием события клика, в данном случае mousedown по всему приложению #app а далее выяснять где Вы кликнули и нужно ли делать перемещение или создание.

Публиковать в вопросе много кода — плохая практика, так как мало кто будет разбираться в Вашем коде построчно, это уменьшает шансы получить ответ. Именно для этих целей в вопросах просят использовать минимально воспроизводимые куски кода. Ту логику которая не является частью вопроса лучше отбрасывать. Почему это важно, потому что кто-то может искать ответ на подобную задачу и если в ней будет много лишних деталей которых у него нет то ему будет сложнее применить этот ответ, либо понять его.

Именно по этой причине, я отбросил лишние детали, так как они напрямую не касаются решаемой задачи. Что касается отписывания от событий, то если передать парамерт once равный true то событие отработает только один раз и после чего js сам отпишется от него, это полезно знать и иногда можно использовать как тут.

Условие event.target.classList.contains('circle') проверяет кликнули ли мы по кругу или нет, если по кругу то перемещаем, если нет то создаем.

const appDiv = document.querySelector("#app");

class Circle {
  constructor({ pageX, pageY, circleSize = 10 }) {
    const element = document.createElement("div");
    element.className = "circle";
    element.style.top = `${pageY - circleSize / 2}px`;
    element.style.left = `${pageX - circleSize / 2}px`;
    this.element = element;
  }
  draw = (container) => {
    container.append(this.element);
  };
}

appDiv.onmousedown = function(event){
  if (event.target.classList.contains('circle')){
    const ball = event.target
    function move(pageX, pageY) {
      ball.style.left = pageX - ball.offsetWidth / 2 + "px";
      ball.style.top = pageY - ball.offsetWidth / 2 + "px";
    }
    function onMouseMove(event) {
      move(event.pageX, event.pageY);
    }
    function mouseUp() {
      document.removeEventListener("mousemove", onMouseMove);
    };
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener('mouseup', mouseUp, {once: true})  
  } else {
    const { pageX, pageY } = event;
    const circle = new Circle({ pageX, pageY });
    circle.draw(appDiv);
  }
}

#app {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 100%;
}

<div id="app">
</div>

Как сделать передвижение фигур на сайте JS

Ответы