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

【问题标题】：Show position of each draggable element显示每个可拖动元素的位置
【发布时间】：2014-09-25 15:54:05
【问题描述】：

好的，下面是我在 js fiddle at 上的一些代码。当前代码允许我移动对象，并显示对象相对于其约束的停止和起始位置。我需要做的是获取每个对象的返回位置。我需要将它们存储在单独的变量中。这个想法是他们将能够动态添加新形状，并且这些形状都将返回那里的坐标，我可以允许他们“保存”，这将使用所有这些变量并将它们 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);

    });

谢谢！

【问题讨论】：

我使用localStorage 做了类似的事情。我不知道这是否是最好的方法，但它对我有用....localStorage

标签： php jquery jquery-ui jquery-ui-draggable

【解决方案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);

    });

【讨论】：