动态设置 mootools makeResizable 的限制？

Question

我正在尝试设置可调整大小的图像的上限值，以将其保持在包含的 div 内。我使用 mootools 使图像既可移动又可调整大小（实现 Drag.Move 和 makeResizing 来实现此目的。）

我的临时解决方案是使用 overflow：因此，当调整大小的图像超出容器的大小时，调整大小的图像不会覆盖页面的其余部分，但我希望能够有一种方法，使图像无法在其容器之外调整大小。

我知道，由于 limit 设置在 'domready' 上，如果我尝试将其设置为一个变量，该变量会随着图像大小的调整而更改值（即：onDrag），限制参数不会即时更新。我想知道是否有人对如何实现与 Drag.Move container 参数类似的效果有任何见解，就像 makeResizing 所做的那样。 t 似乎有相同的参数。

HTML：

<div id="pImageArea">
    <div id="pLogo" class="displayNone">
        <div id="moveHandleName">
            <img src="uploadedlogo.jpg" id="imgName" /> 
        </div>
        <div id="resizeHandleName"></div>
    </div>
</div>

CSS：

#imageArea {
    float: left;
    width: 630px;
    height: 400px;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
}
#imgContainer {
    width: 50px; 
    height: 50px; 
    border: 1px dashed #333;
    position: absolute;
}
#imgName {
    width: 100%;
}
#moveHandleName {
    width: 100%;
    height: 100%;
}
#resizeHandleName {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    position: absolute;
    left: 100%;
    top: 100%;
    margin: -5px 0 0 -5px;
    background-color: #fff;
    z-index: 100;
}

JS：

window.addEvent('domready', function(){
    var xLim = 50;
    var yLim = 50;
    // Make image moveable
    new Drag.Move($('imgContainer'), {
        container: $('imageArea'),
        handle: $('imgHandleName')
    });
    // Make image resizable
    $('imgContainer').makeResizable({
        handle:$('handleName'),
        limit: {x: [50, xLim], y: [50, yLim]},
        onDrag: function(el) {
            // Set imgContainer height
            el.setStyle('height', $('imgName').getSize().y + 'px');
            // Set upper limits
            xLim = $('imageArea').getSize().x - el.getSize().x;
            yLim = $('imageArea').getSize().y - el.getSize().y;
        },
    });
});

提前致谢，

马特

Answer 1

我在自己的代码中像这样“解决”了它（修改为使用您的元素和值）：

$('imgContainer').retrieve('resizer').setOptions({
    limit: {
        x: [50, xLim],
        y: [50, yLim]
    }
});

Answer 2

一旦您指定了“容器”选项并且您的容器具有设定的宽度和高度，则应正确执行移动限制。当您调整大小时，我的可拖动对象不需要（重新）设置限制。 （顺便使用 Moo 1.4。）
然而，调整大小确实会导致与移动和限制相关的问题。关键是“limit”选项仅在初始化 makeResizable() 时设置。更新它的唯一方法是使用上面显示的代码进行设置。但是您必须在放置可拖动对象后立即更新它，因为这是影响限制的唯一事件。所以：

// Make image moveable
new Drag.Move($('imgContainer'), {
    container: $('imageArea'),
    handle: $('imgHandleName'),
    onDrop: function() {
        $('imgContainer').retrieve('resizer').setOptions({
        limit: {
            x: [50, $('imageArea').getSize().x - parseInt($('imageArea]).getStyle('left'))],
            y: [50, $('imageArea').getSize().y - parseInt($('imageArea]).getStyle('top'))]
        }
        });
    });    

正如你所看到的，我还使用了 getStyle() 而不是 getPosition()，因为 getPosition() 返回一个相对于窗口的值，而 Moo 设置相对于 droparea 的可拖动顶部和左侧。