使用jQuery拖放后如何获得坐标位置？ [英] How do I get the coordinate position after using jQuery drag and drop?

问题描述

使用jQuery拖放后如何获得坐标位置？我想将坐标保存到数据库，所以下次我访问时，项目将处于该位置。例如，x：520px，y：300px？

编辑：

我是PHP和mysql程序员： ）

有没有任何教程？

解决方案

做了这样的事情（如果我正确理解你的话）。

我使用他的功能position（）包含在jQuery 1.3.2。

刚刚做了一个复制粘贴和一个快速的调整...但应该给你的想法。

  /使图像可拖动。 
 $（。item）。draggable（{
 
 //查找拖动图像的原始位置
开始：function（event，ui）{
 
 //显示开始拖动的图像位置
 var Startpos = $（this）.position（）; 
 $（div＃start）。text（START：\\\
Left： + Startpos.left +\\\
Top：+ Startpos.top）; 
}，
 
 //查找放置图像的位置
停止：function（event ，$ u。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
 $ b $ STOP：\\\
Left：+ Stoppos.left +\\\
Top：+ Stoppos.top）; 
} 
}）; 
 
< div id =container> 
< img id =productid_1src =images / pic1.jpgclass =itemalt =title =/> 
< img id =productid_2src =images / pic2.jpgclass =itemalt =title =/> 
< img id =productid_3src =images / pic3.jpgclass =itemalt =title =/> 
< / div> 
 
< div id =start>等待拖动图像开始...< / div> 
< div id =stop>等待图像下降...< / div> 
  

How do I get the coordinate position after using jQuery drag and drop? I want to save the coordinate to a database, so that next time I visit, the item will be in that position. For example, x: 520px, y: 300px?

EDIT:

I am PHP and mysql programmer :)

Is there any tutorial out there?

解决方案

I just made something like that (If I understand you correctly).

I use he function position() include in jQuery 1.3.2.

Just did a copy paste and a quick tweak... But should give you the idea.

// Make images draggable.
$(".item").draggable({

    // Find original position of dragged image.
    start: function(event, ui) {

        // Show start dragged position of image.
        var Startpos = $(this).position();
        $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
    },

    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
    }
});

<div id="container">
    <img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" />
    <img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" />
    <img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" />
</div>

<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>

这篇关于使用jQuery拖放后如何获得坐标位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！