Question

我正在尝试设置可调整大小的图像的上限值，以使其保持在包含的div中。我正在使用mootools使图像既可移动又可调整大小（实现Drag.Move和makeResizable这样做。）

我的临时解决方案是使用overflow:hidden;，因此当尺寸超出容器时，调整大小的图像不会超过页面的其余部分，但我希望能够有一个方法，以便图像可以不要在其容器外调整大小。

我知道，因为limit设置在'domready'上，如果我尝试将其设置为随着图像调整大小而改变值的变量（即：onDrag），则限制参数不会即时更新。我想知道是否有人了解我如何能够对Drag.Move container参数产生类似效果，因为makeResizable似乎没有相同的参数。

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

一旦指定'container'选项并且容器具有设置的宽度和高度，就应该正确执行移动限制。调整大小时，我的拖动不需要设置限制（重新）。（顺便使用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设置了可拖动的top和left。

动态设置mootools makeResizable的限制？

2 个答案: