Установка предела для mootools makeResizable динамически?

Question

Я пытаюсь установить верхний предел значений для изменяемого размера изображения, чтобы сохранить его в содержащем div. Я использую mootools, чтобы сделать изображение как подвижным, так и изменяемого размера (для этого реализуем Drag.Move и makeResizable.)

Мое временное решение состоит в том, чтобы использовать overflow:hidden;, чтобы изображение с измененным размером не перекрывало остальную часть страницы, если его размер превышал контейнер, но я бы хотел иметь способ, чтобы изображение не могло быть изменил размеры вне контейнера.

Я знаю, что, поскольку limit установлен на 'domready', если я попытаюсь установить для него переменную, которая изменяет значение при изменении размера изображения (то есть: onDrag), параметр limit не будет обновляться на лету. Мне интересно, есть ли у кого-нибудь понимание того, как я могу добиться эффекта, подобного параметру 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

Предел перемещения должен быть соблюден должным образом после того, как вы укажете опцию '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.

Answer 2

Я «решил» это так в моем собственном коде (измененном для использования вашего элемента и значений):

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