顯示每個可拖動元素的位置

Question

好的，所以繼承了我在js上的一些代碼。當前的代碼允許我移動對象，並顯示對象相對於其約束的停止和起始位置。我需要做的是獲得每個對象返回的位置。我需要把它們儲存在不同的變量中。這個想法是，他們將能夠動態地添加新的形狀，這些形狀都會返回座標，我可以讓他們「保存」，這將使用所有這些變量和AJAX他們到數據庫。目前它只返回最新拖動的對象，我怎麼修改這個以允許它顯示每個對象的位置。我對使用JQuery/JQueryUI有點新，所以向正確的方向推動是有幫助的。

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: \nX: "+ Startpos.left + "\nY: " + Startpos.top); 
    }, 

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

     // Show dropped position. 
     var Stoppos = $(this).position(); 
     $("div#stop").text("CURRENT: \nX: "+ Stoppos.left + "\nY: " + 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); 

    }); 

謝謝！

Answer 1

你可以使用drag：function（event，ui），我已經在我的jsfiddle中創建了一個，請檢查一下。

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: \nX: "+ Startpos.left + "\nY: " + Startpos.top); 
    }, 
     drag: function(event, ui){ 
      var Startpos = $(this).position(); 
     $("div#current").text("Current: \nX: "+ Startpos.left + "\nY: " + Startpos.top); 
     }, 
    // Find position where image is dropped. 
    stop: function(event, ui) { 

     // Show dropped position. 
     var Stoppos = $(this).position(); 
     $("div#stop").text("CURRENT: \nX: "+ Stoppos.left + "\nY: " + 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); 

    });