jquery如何将图钉添加到图像并将位置保存到SQL

如何固定图像，并保存我的图钉位置？

我找到了这个插件 ，但我不知道如何保存这些引脚的位置。

这个想法就像谷歌地图，用户可以根据需要放置尽可能多的引脚，并将这些引脚位置保存到数据库中; 下次他登录时，他可以看到他把针放在哪里。

Answer 1

试试这个 – 它非常简单但效果很好。

http://duncanheron.github.com/dropPin/

您需要根据需要对其进行自定义，但是在图像中添加引脚坐标的一般想法就在那里。

Answer 2

你可以得到这样的节点信息：

function getNodes(){ var nodes = []; $('img', $('#container')).each(function(){ nodes.push([$(this).css('top'), $(this).css('left')]); }); $.post('save.php', {nodes: nodes}, function(data){}, 'json'); } 

然后节点的位置将发布到save.php。

Answer 3

您可以使用jQuery鼠标位置来了解添加引脚的位置，并将这些变量推送到您的sql数据库中。

 $("#special").click(function(e){ $('#imgId').html(e.pageX +', '+ e.pageY); }); 

棘手的部分是将jquery vars转换为php（下面的参考资料），所以你的sql应该看起来像这样：

user_id – pin_id – positionX – positionY

资源：

鼠标位置： http ： //docs.jquery.com/Tutorials : Mouse_Position

将jquery传递给php： http ： //www.sitepoint.com/forums/showthread.php？ 650046-Passing-Jquery-Var-To-Php-Mysql-Query

希望这对你有所帮助！

编辑此帖后的第一评论：

您可以在单击时添加一个新图像，并为其添加样式，如下所示：

 $("#imageDiv").click(function (e) { $(this).addImage($(this), e.pageX, e.pageY); }); function addImage(object, xPos, yPos){ object.append(""); } 

PS：您的对象div应该设置为position：relative并且不确定这是否可行，这是在没有测试代码的情况下编写的，可能需要进行一些更改！