Happy Programming

Event.observe(window, 'load', function(event) {
    var posX;
    var posY;
    $('drag').observe('mousemove', function(event) {
        var elem = event.element();
        var drg = function(event) {
            event.preventDefault();
            elem.setStyle({
                width: event.pointerX() - elem.positionedOffset().left - (parseInt(elem.getStyle('border-left-width')) + parseInt(elem.getStyle('border-right-width'))) + posX + 'px',                
                height: event.pointerY() - elem.positionedOffset().top - (parseInt(elem.getStyle('border-left-width')) + parseInt(elem.getStyle('border-right-width'))) + posY + 'px'
            });
        };
        if (event.element().getDimensions().width + event.element().positionedOffset().left - event.pointerX() < 20 &&
        event.element().getDimensions().height + event.element().positionedOffset().top - event.pointerY() < 20 ) {
            elem.setStyle({cursor: 'pointer'});
            
            elem.observe('mousedown', function(event) {
                event.stop();
                posX = event.element().getDimensions().width + event.element().positionedOffset().left - event.pointerX();
                posY = event.element().getDimensions().height + event.element().positionedOffset().top - event.pointerY();
                document.observe('mousemove', drg);
            });
            
            document.observe('mouseup', function(event) {
                event.stop();
                document.stopObserving('mousemove', drg);
            });
            
        } else {
            elem.setStyle({cursor: 'default'});
            elem.stopObserving('mousedown');
        }
    });
});

下の写真は右下をつかんでドラッグできる。

上のコードはid属性dragのオブジェクトの上でマウスが動いた時にリスナー関数を実行しているがその関数内で特定のエリア内のみ反応するように条件判断をしている
具体的には

if (event.element().getDimensions().width + event.element().positionedOffset().left - event.pointerX() < 20 &&
        event.element().getDimensions().height + event.element().positionedOffset().top - event.pointerY() < 20 )

この部分だ
ここで条件がマッチした時だけカーソルを変更したり'mousedown'イベントを感知するようになっている。 リスナー関数の中でデフォルトの動作を止めたり、イベントの上位伝播を防ぐ為に

event.stop();

と、いうコードをよく使うがこのコードの'mousemove'イベントの時はこれを使ったら駄目だ。
写真の上にマウスがある時に上位の'document'までイベントが伝わらず妙な動きになってしまう。

ここでは写真を使っているが当然それ以外のdivボックス等にも適用可能だ。
写真に対して適用するときはX軸のみ、もしくはY軸のみ変更するようにすれば比率を保ったまま拡縮できる。
ただしそのときはIMGタグに対してのwidth（height）属性やスタイルシートでのwidth（height）属性も空（もしくは片方だけ指定する）にしておく