Блог

Главная - Вопросы по программированию - Установка предела для mootools, которые можно изменять динамически?

Установка предела для mootools, которые можно изменять динамически?

#mootools #drag #resizable

#mootools #перетаскивание #изменяемый размер

Вопрос:

Я пытаюсь установить верхние предельные значения изображения с изменяемым размером, чтобы оно оставалось в пределах содержащего 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;
        },
    });
});

Заранее спасибо,

Мэтт

Ответ №1:

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

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

Комментарии:

1. Спасибо, LH. По какой-то причине я не смог повторить успех с помощью этого метода, но в требованиях произошли изменения (шокирующие, я знаю) до такой степени, что эта функциональность больше не нужна.

2. Вот что происходит. Но чего я не заметил в своем ответе, так это того, что ваша логика неверна. Вам нужно иметь ограничения как на перемещение, так и на изменение размера и пересчитывать ограничение на перемещение при изменении размера, и наоборот.

Ответ №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 задает перетаскиваемые верхнюю и левую части относительно области выпадения.