我正在使用PHP开发餐厅管理Web应用程序。
在此应用程序中,我想创建表的平面布置图,这意味着管理员可以从左侧拖放表,并在右侧创建餐厅的布置,并将布置和表的详细信息存储在数据库中。
我正在使用Yii2框架。
为此,我创建了可拖动的canvas标记,但是如何从画布上获取输入?
我的画布标签:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;" value="4"></canvas>
jQuery的:
$(function() {
$( "#myCanvas" ).draggable();
});
我已经尝试了如上所述。我不知道天气是否正确。
请给我一些想法,我该怎么做这个将表格详细信息保存到数据库的可拖动画布输入表单。
最佳答案
您可以在画布中定义具有边界的区域。最简单的方法是知道元素周围的矩形/圆形。通过单击到给定位置,您将了解x,y值,并且,如果您知道形状的不等式,则可以确定哪些形状包含单击的点。在我们的例子中,由于您要使用拖动,因此您将感兴趣的事件是:
ondragstart
ondragend
在这些事件中,您将能够找出拖动开始的位置和拖动结束的位置,因此,您将能够确定初始画布中的哪个项目包含拖动的位置开始,应该在目标画布上的哪个位置创建项目。但是最好以图形方式显示拖动内容,并且为此目的,您可以创建一个容器,其中将装有所需的图像并随光标一起移动。您可以通过创建一个可移动的容器来实现该目标,该容器将在ondragstart上可视化,在ondrag上移动,在ondragend上隐藏。