0

I'm trying to set the upper limit values of a resizable image to keep it within the containing div. I'm using mootools to make the image both moveable and resizable (implementing Drag.Move and makeResizable to do so.)

My temporary solution is to use overflow:hidden; so the resized image does not overtake the rest of the page when it is sized beyond the container, but I'd like to be able to have a way so the image can not be resized outside of its container.

I know that since limit is set on 'domready', if I try to set it to a variable that changes value as the image is resized (ie: onDrag), the limit parameter won't be updated on the fly. I'm wondering if anyone has any insight into how I can achieve a similar effect to the Drag.Move container parameter, as makeResizable doesn't seem to have the same parameter.

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;
        },
    });
});

Thanks in advance,

Matt

4

2 回答 2

0

一旦您指定了 '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 设置相对于放置区域的可拖动顶部和左侧。

于 2011-10-20T14:39:00.767 回答
0

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

$('imgContainer').retrieve('resizer').setOptions({
    limit: {
        x: [50, xLim],
        y: [50, yLim]
    }
});
于 2011-05-20T20:12:38.937 回答