How do I get the coordinate position after using jQuery drag and drop?

Question

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?

Answer 1

I would start with something like this:

http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php

Then update that to use the position plugin:

http://docs.jquery.com/Plugins/dimensions/position

and that should get you where you want to be.

Answer 2

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>

Answer 3

Thanks for sharing.