如何使用句柄動態調整大小？ 沒有UI

Question

我正在嘗試創建一個用於調整拖放大小的函數，但我遇到了問題。 該腳本不會立即響應鼠標光標方向的變化。 如果按住按鈕不放，然后向右再向左移動光標，它只會暫時增加對象的大小。 演示

使用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>

Answer 1

您需要更新re_om_x使用正在重置后寬re_om_x = e.pageX; 。

並且我添加了一個新的變量width ，因為在target_wp.width((e.pageX - re_om_x) + target_wp.width()); ， target_wp.width()會帶來偏差，它始終是一個整數。

我將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/

Answer 2

為簡單起見，請參見jQuery UI函數.resizable（） 。 只需記住，您將需要在頁面中添加jqueryui .css和.js腳本。 然后，您只需致電

$("#some_div_to_resize").resizable();