显示每个可拖动元素的位置

Question

Ok, so heres some of my code on js fiddle at . The current code allows me to move the objects and it shows the stop and starting position of the object relative to its constraint. What I am needing to do, is to get the position returned of EACH object. I need them stored in separate vars. The idea is they will be able to add new shapes dynamically and those shapes will all return there coordinates and I can allow them to "SAVE" which will use all those variables and AJAX them to a database. Currently it only returns the latest dragged object, how can I modify this to allow it to show each objects position. I'm a little new to playing with JQuery/JQueryUI so any push in the right direction is helpful.

http://jsfiddle.net/ryv8kz9g/

    $( init );
function init() {
  $('.square, .round').draggable({
    containment: '#layout-area',  start: function(event, ui) {

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

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

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop").text("CURRENT: 
X: "+ Stoppos.left + "
Y: " + Stoppos.top);
    }

});
}
    $(document).ready(function() {
        var params = {
            // Callback fired on rotation start.
            start: function(event, ui) {
            },
            // Callback fired during rotation.
            rotate: function(event, ui) {
            },
            // Callback fired on rotation end.
            stop: function(event, ui) {
            },
        };
        $('#table, #table1, #table2, #table3, #table4, #table5').rotatable(params);

    });

Thanks!

Answer 1

you can use drag:function(event, ui), i have created one in my jsfiddle, check this out.

http://jsfiddle.net/Arindamnayak/bcxex133/

<div id="layout-area">

  <div id="table" class="square resize"> </div>
<div id="table2" class="square resize"> </div>
<div id="table3" class="round resize"> </div>
<div id="table4" class="round resize"> </div>
<div id="table5" class="square resize"> </div>
  <div id="table" class="square resize"> </div>
<div id="table2" class="square resize"> </div>
<div id="table3" class="round resize"> </div>
<div id="table4" class="round resize"> </div>
<div id="table5" class="square resize"> </div>
</div>
<div id="start">Waiting for dragging the image get started...</div>
    <div id="start">Waiting for dragging the image get started...</div>
<div id="current">Waiting image getting dropped...</div>

$( init );
function init() {
  $('.square, .round').draggable({
    containment: '#layout-area',  start: function(event, ui) {

        // Show start dragged position of image.
        var Startpos = $(this).position();
        $("div#start").text("START: 
X: "+ Startpos.left + "
Y: " + Startpos.top);
    },
      drag: function(event, ui){
          var Startpos = $(this).position();
        $("div#current").text("Current: 
X: "+ Startpos.left + "
Y: " + Startpos.top);
      },
    // Find position where image is dropped.
    stop: function(event, ui) {

        // Show dropped position.
        var Stoppos = $(this).position();
        $("div#stop").text("CURRENT: 
X: "+ Stoppos.left + "
Y: " + Stoppos.top);
    }

});
}
    $(document).ready(function() {
        var params = {
            // Callback fired on rotation start.
            start: function(event, ui) {
            },
            // Callback fired during rotation.
            rotate: function(event, ui) {
            },
            // Callback fired on rotation end.
            stop: function(event, ui) {
            },
            drag: function(event, ui){
            }
        };
        $('#table, #table1, #table2, #table3, #table4, #table5').rotatable(params);

    });