1

シンプルな画像の「クリックアンドドラッグ」サイズ変更スクリプトを作成しようとしています。jquery UI を使用したくないのは、余分な div が大量に追加されてテキストが乱雑になり、それらの余分な div を削除するための追加の手順が必要になるためです。

このスクリプトは機能しますが、フィドルでわかるように、非常に不安定です。

マウスが「ダウン」（クリック）されたときにのみマウスの移動でのみサイズが変更され、マウスアップ時にサイズ変更を停止し、変数を元の開始位置にリセットする方法を見つけようとしています。

前もって感謝します。ここでずさんな書式設定をして申し訳ありませんが、フィドルでよりきれいにします。

ここから元のコードを取得しました: originalsource オリジナル を貼り付けたので、鮮明な画像が得られます

ここにjsfiddleがあります：jsfiddle

jQuery.fn.extend({
    resize: function(params){
    var jQ = jQuery;
    return this.each(function(){
        var clicked = false; //set to off
        var start_x; //starting point of mouse
        var start_y; 
        if(params && params['target']){ var resize = params['target'];} //if target passed then use that
        else{ var resize = this; }
        if(params && typeof(params['y']) != "undefined"){ var y = params['y'];} //if y passed then fix the max height
        else{ var y = 1;}
        if(params && typeof(params['x']) != "undefined"){ var x = params['x'];} //if x then fix width
        else{ var x = 1;}
        if(params && typeof(params['min_width']) != "undefined"){ var min_w = params['min_width'];}
        else{ var min_w = 1;}
        if(params && typeof(params['min_height']) != "undefined"){ var min_h = params['min_height'];}
        else{ var min_h = 1;}

        $(this).hover(
                function(){$(this).css('cursor', 'move');},
                function(){$(this).css('cursor','default');clicked=false;}
                );          
        $(this).mousedown(function(e){
            clicked = true;
            start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
            start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
        });
        $(this).mouseup(function(e){clicked = false;});
        $(this).mousemove(function(e){
            if(clicked){
                var mouse_x = Math.round(e.pageX - $(this).eq(0).offset().left) - start_x;
                var mouse_y = Math.round(e.pageY - $(this).eq(0).offset().top) - start_y;
                var div_w = $(resize).width();
                var div_h = $(resize).height();
                var new_w = parseInt(div_w)+mouse_x;
                var new_h = parseInt(div_h)+mouse_y;    
                if(x==1 || (typeof(x) == "number" && new_w < x && new_w > min_w) ){ $(resize).css('width', new_w+"px"); }
                if(y==1 || (typeof(y) == "number" && new_h < y && new_h > min_h) ){ $(resize).css('height',new_h+"px"); }
                start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
                start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
            }
        });                 
});
}
});
4

1 に答える 1

1

hover イベントと mousedown/mouseup イベントの両方でclickedvar を変更すると、お気づきのように少し不安定になることがわかりました。

dblclick()画像を選択してから選択を解除するために使用するように変更しclick()、機能をより直感的にしました。だから私はあなたの行を次のように置き換えまし$(this).hover (...た:

...

$(this).dblclick(function(e){
    $(this).css('cursor', 'move');
    clicked = true;
    start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
    start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
});
$(this).click(function(){
    $(this).css('cursor','default');
    clicked=false;
});

問題は、マウスが画像から離れたときに $(this).mousemove(function(e){... 関数が停止し、代わりにウィンドウをターゲットにすると、マウスの位置がより予測しやすくなることです:

$(window).mousemove(function(e){ ...

必要に応じて画像を参照できるようにするために、新しい変数image.

また、パラメーターのドット表記を使用してコードをクリーンアップしました。

ここで私の作業編集を参照してください: http://jsfiddle.net/a3vYu/15/

于 2012-10-12T07:03:10.040 に答える