制作可以从 HTML 表单中获取输入的可拖动元素（圆形、矩形等形状）

Question

我正在使用 PHP 开发餐厅管理 Web 应用程序。

在这个应用程序中，我想创建表格的平面布置图，这意味着管理员可以从左侧拖放表格并在右侧创建餐厅的布局，并将布局和表格详细信息存储在数据库中。

我正在使用 Yii2 框架。

为此，我创建了可拖动的画布标签，但我如何从画布中获取输入？

我的画布标签：

<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 上隐藏。