2

ドラッグアンドドロップによるサイズ変更の関数を作成しようとしていますが、問題があります。スクリプトは、マウスカーソルの方向の変更に即座に反応しません。ボタンを押したままカーソルを右に動かしてから左に動かすと、オブジェクトのサイズが一瞬だけ大きくなり続けます。 デモ

Javascript：

var re_dragging = false, re_om_x, re_om_y, re_o_x, re_o_y, re_n_x, re_n_y;
function resize(resize_btn){
    resize_btn.mousedown(function(e){
        e.preventDefault();
        e.stopPropagation();
        re_dragging = true;
        re_om_x = e.pageX;
        re_om_y = e.pageY;// origin mouse postion
        target_wp = $(e.target).closest('.draggable_wp').find('.draggable_el');
    });
    $(document).mousemove(function(e){
        if(re_dragging){
            target_wp.width((e.pageX - re_om_x) + target_wp.width());
        }
    });
    $(document).mouseup(function(e){
        re_dragging = false;
    });
};
var resize_btn = $('.draggable_btn_resize');
resize(resize_btn);

HTML：

<div class="draggable_wp">
    <div class="wp_img">
        <img src=""class="draggable_el">
    </div>
    <div class="btn">
        <div class="draggable_btn_resize"></div>
    </div>
</div>
4

2 に答える 2

1

re_om_xを使用して幅をリセットした後、更新する必要がありますre_om_x = e.pageX;。

そして、新しい変数を追加しますwidth。これはtarget_wp.width((e.pageX - re_om_x) + target_wp.width());、で、target_wp.width()が偏差をもたらすため、常にintを取得するためです。

私は以下のように書き直しmousemoveます：

 $(document).mousemove(function (e) {
     if (re_dragging) {
         target_wp.width((e.pageX - re_om_x) + width);
         width = (e.pageX - re_om_x) + width
         re_om_x = e.pageX;

     }
 });

これがデモです。http://jsfiddle.net/U9vre/1/

于 2013-02-07T18:20:43.657 に答える
-1

簡単にするために、jQuery UI関数.resizable（）を参照してください。次に、jqueryui.cssおよび.jsスクリプトをページに追加する必要があることを覚えておいてください。その後、電話する必要があります

$("#some_div_to_resize").resizable();
于 2013-02-07T18:23:05.877 に答える