创建一个动态的足球场

Question

我需要建立一个足球场，然后有一些下拉菜单，选择阵型(如4-4-2，4-5-1等)，并移动我的球员(更像圆圈的号码/名字)，以实现理想的队形。

对我该怎么开始有什么想法吗？

Answer 1

正如cfv1000所说，您应该查看jQuery UI中的拖曳 & 可下垂。

这是我为你做的第一步。它还没有接近完成。

使用元素的标识符，只需按如下方式调用draggable()：

$("#GKRedTeam").draggable();
$("#GKBlueTeam").draggable();

在许多即将添加的..and中-为它设置适当的HTML和CSS属性。

JsFiddle演示

Answer 2

使用http://kineticjs.com/，您可以将图像导出到png或保存在服务器(我认为)，如果您想要重用所有之后，您必须在PHP中创建具有相同属性的对象，并将其保存在一个数据库中，或者在发送对象javascript中的另一个选项中保存它，而不进行任何修改(小心注入代码)，然后您必须修改从服务器收取对象/信息的图像。

另一个选择是使用localStorage，if将始终使用相同的浏览器。

请参阅示例http://www.html5canvastutorials.com/labs/html5-canvas-shape-tango-with-kineticjs/ (单击一个图像以显示可拖动的图像)

Answer 3

检查这个存储库jquery-matchcenter

交互式足球场的JQuery实现