如何动态调整手柄大小？没有用户界面

我正在尝试创建一个拖放调整大小的功能，我遇到了问题。该脚本不会立即对鼠标光标方向变化作出反应。如果我按住按钮并向右移动光标，然后向左移动，它只会持续增加对象的大小。 demo 如何动态调整手柄大小？没有用户界面

的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>

来源

2013-02-07 user1775888

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

我添加一个新变量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-07 18:20:43 pktangyue

-1

为简单起见，请参阅jQuery UI函数.resizable()。请记住，您需要将jqueryui .css和.js脚本添加到您的页面。您将只需致电

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

来源

2013-02-07 18:23:05

如何动态调整手柄大小？没有用户界面

回答

相关问题