Question

好的，所以我的一些代码是关于js的。当前代码允许我移动对象，它显示对象相对于其约束的停止和起始位置。我需要做的是获得EACH对象的返回位置。我需要将它们存储在不同的变量中。我们的想法是，他们将能够动态添加新的形状，这些形状将返回坐标，我可以让他们“保存”＃34;这将使用所有这些变量和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);

    });

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

1 个答案: