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"。

可拖动的收容和调整窗口大小

1 个答案: