0

サイズ変更可能な画像の上限値を設定して、含まれている div 内に保持しようとしています。私は mootools を使用して、画像を移動可能かつサイズ変更可能にしています (実装Drag.MoveしmakeResizable、そうするために)。

私の一時的な解決策はoverflow:hidden;、サイズ変更された画像がコンテナーを超えてサイズ変更されたときにページの残りの部分を追い越さないようにすることですが、コンテナーの外で画像のサイズを変更できないようにする方法が必要です。

limitが on に設定されている'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;
        },
    });
});

前もって感謝します、

マット

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'))]
        }
        });
    });

ご覧のとおり、getPosition() の代わりに getStyle() を使用しました。これは、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 に答える