Question

我试图将可拖动对象的坐标保存到x_cord和y_cord变量。这似乎是有效的，但是，当我调用restore（）函数时，新对象离原始对象很远。也许我没有正确理解offset（）vs position（）。

谢谢你的期待！

保存代码：

// Set Draggable Options
new_field.draggable({
     containment: droppable_page,
     stop: function(event, ui) {
          x_cord = ui.position.left;
          y_cord = ui.position.top;
          // This will eventually be saved via AJAX
          console.log(x_cord + " " + y_cord);
     }
});

恢复代码：

function restore() {
    var draggable = $("#testDrop").draggable();
    var droppable = $("#pages_area .page:first").droppable();

    var droppableOffset = droppable.offset();
    var dx = droppableOffset.left - x_cord;
    var dy = droppableOffset.top - y_cord;

    draggable.simulate("drag", {
      dx: dx,
      dy: dy
    });
}

完整代码：

$(document).ready(function(){

    var x_cord;
    var y_cord;

    $(".page").droppable({
        accept: ".droppableShape",
        tolerance: 'fit',
        drop: function(event,ui){

            // Set variables
            var new_field = $(ui.helper).clone().removeClass('droppableShape');
            var droppable_page = $(this);
            var droppableOffset = $(this).offset();

            // Check the tool type
            switch(new_field.attr('class').split(" ")[0]) {
                case "signatureTool":
                    new_field.data( "field-type", "signature");
                    new_field.css('top', ui.position.top - droppableOffset.top);
                    new_field.css('left', ui.position.left - droppableOffset.left);
                    break;
                case "initialTool":
                    new_field.data( "field-type", "initial");
                    new_field.css('top', ui.position.top - droppableOffset.top);
                    new_field.css('left', ui.position.left - droppableOffset.left);
                    break;
                default:
                    console.log("Must be our test object!");
            }

            // Provide Delete Controls
            new_field.addClass('field').addClass('btn-delete');
            new_field.append('<span class="glyphicon glyphicon-remove btn-delete"><span>');

             // Assign this field to a recipient
            var recipient_id = $('ul#recipient_list .active').attr("id");
            new_field.data( "recipient_id",  recipient_id);

             // Assign this field to a page
            var page_id = $(this).attr("id");
            new_field.data( "page_id",  page_id);

            // Set Draggable Options
            new_field.draggable({
                containment: droppable_page,
                stop: function(event, ui) {
                    // I am manually saving these to restore them
                    x_cord = ui.position.left;
                    y_cord = ui.position.top;
                    console.log(x_cord + " " + y_cord);
                }
            });

            // Add to drop area
            $(this).append(new_field);
        }
    });

    $('.page').on('click', '.field .btn-delete', function () {
        $(this).parent('div').remove();
    });

    $('#recipient_list').on('click', 'li', function () {
        $('#recipient_list li').not(this).removeClass('active');
        $(this).addClass('active');
    });
}

function restore() {
    var draggable = $("#testDrop").draggable();
    var droppable = $("#pages_area .page:first").droppable();

    var droppableOffset = droppable.offset();
    var dx = droppableOffset.left - x_cord;
    var dy = droppableOffset.top - y_cord;

    draggable.simulate("drag", {
      dx: dx,
      dy: dy
    });
}

Answer 1

你的假设是正确的。

<强>位置：给出相对于其父元素的坐标

<强>偏移：为您提供相对于页面的坐标

.offset（）方法允许我们检索一个的当前位置元素相对于文档。将此与.position（）对比，它检索相对于偏移父项的当前位置。

请参阅jQuery .offset()或jQuery .position()

jQuery UI保存/恢复可丢弃位置

1 个答案: