Создание перетаскиваемых элементов (круг, прямоугольник, как фигуры), которые могут принимать ввод из HTML-формы

Question

Я работаю над веб-приложением для управления рестораном на PHP.

В этом приложении я хочу создать план расположения этажей таблиц, который означает, что администратор может перетаскивать таблицы с левой стороны и создавать макет таблицы.рестораны на правой стороне и хранят макет и детали таблиц в базе данных.

Я использую Yii2 Framework.

Для этого я создал холст тег, который можно перетаскивать, но как я могу получить ввод изхолст?

Мой тег холста:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" value="4"></canvas>

Jquery:

 $(function() {
        $( "#myCanvas" ).draggable();
    });

Я пробовал, как указано выше.Я не знаю, нахожусь ли я на правильном пути или нет.

Пожалуйста, дайте некоторое представление, как я могу сделать эту перетаскиваемую форму ввода холста, которая сохраняет детали таблиц в моей базе данных.

Answer 1

Вы можете определить области на вашем холсте, которые имеют границы.Самый простой способ сделать это - знать о прямоугольнике / круге вокруг ваших элементов.Нажав на определенную позицию, вы узнаете о значении x, y и, если вы знаете неравенство ваших фигур, вы сможете определить, какие фигуры содержат точку, на которую вы щелкнули.В нашем случае, так как вы хотите работать с перетаскиванием, интересующие вас события:

• ondragstart
• ondragend

На этих мероприятиях вы сможете узнать, в какой точке было начато перетаскивание, и в какой точке было закончено перетаскивание, поэтому вы сможете определить, какой элемент вваш начальный холст содержит точку, с которой началось перетаскивание и в какой точке должен быть создан ваш элемент на целевом холсте.Но было бы неплохо сделать графическое отображение перетаскивания, и для этого вы можете создать контейнер, который будет заполнен нужным вам изображением и перемещаться вместе с вашим курсором.Этого можно добиться, создав подвижный контейнер, который будет визуализироваться при ondragstart, перемещаться по ondrag и прятаться по ondragend.