php - 制作可以从 HTML 表单输入的可拖动元素(圆形、矩形等形状)

Question

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

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

我正在使用 Yii2 框架。

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

我的 Canvas 标签:

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

J查询:

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

我已经按照上面的方法试过了。我不知道天气是否正确。

请给我一些想法，我怎样才能做这个可拖动的 Canvas 输入表单，它将表格的详细信息保存到我的数据库中。

Answer 1

您可以在 Canvas 中定义具有边界的区域。最简单的方法是注意元素周围的矩形/圆形。通过单击给定位置，您将了解 x、y 值，如果您知道形状的不等式，则您将能够确定哪个形状包含您单击的点。在我们的例子中，由于您想使用拖动，因此您会感兴趣的事件是:

• ondragstart
• ondragend

在这些事件中，您将能够找出拖动开始的点和拖动结束的点，因此，您将能够确定初始 Canvas 中的哪个元素包含该点拖动开始的位置以及应该在目标 Canvas 中创建元素的位置。但是最好能以图形方式显示拖动，为此您可以创建一个容器，其中将填充您需要的图像并随光标一起移动。您可以通过创建一个可移动容器来实现这一点，该容器将在 ondragstart 上可视化，在 ondrag 上移动并在 ondragend 上隐藏。