可拖动的包含和调整窗口大小

Question

我有这个代码

   $(window).resize(function()
        {       
            x2 = $('#mask').offset().left;

        });

    $(image).draggable({cursor: 'move', containment: [ 0, 0, x2, 0]}); 

但是我不知道如何实现拖放图片来反映浏览器窗口的大小。

我试图做的所有事情，它都无法正常工作或无法正常工作。我累了。请帮帮我

Answer 1

您的所有resize 代码所做的只是更新变量x2。 Draggable 不访问那个变量，它有一个你传递给它的值的副本。

您可以更新Draggable 的包含矩形：

// Presumably you declare and initialize `x2` somewhere
// ...

// Create the Draggable with the initial bounds
$(image).draggable({cursor: 'move', containment: [ 0, 0, x2, 0]}); 

// Watch for resize
$(window).resize(function() {       
    // Recalc
    x2 = $('#mask').offset().left;

    // Update the existing draggable with its new bounds
    $(image).draggable("option", "containment", [ 0, 0, x2, 0]);
});

不过，另外，我会在 resize 处理程序中查看这一行：

x2 = $('#mask').offset().left;

大多数时候，元素的左坐标不会受到窗口调整大小的影响。它可以是，如果元素是内联的或其他东西，因此它受到自动换行的影响，或者它被浮动移动，或者它的位置由百分比定​​义，或者其他一些东西，但大多数时间，left 是唯一不会改变的坐标。

另请注意，如果您将Draggable 创建为定义您希望能够拖动它的边界的元素内的子元素，您可以完全摆脱resize 处理程序，只需使用选项containment: "parent"。