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

我正在尝试创建一个用于拖放调整大小的函数，但我遇到了一个问题。脚本不会立即对鼠标光标方向的更改做出反应。如果我按住按钮并将光标向右移动，然后向左移动，它只会在一瞬间继续增加对象的大小。

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:

---

使用

re_om_x=e.pageX重置宽度后，需要更新
re_om_x

我添加了一个新变量
width
，因为在
target\u wp.width（（e.pageX-re\u om\u x）+target\u 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;

     }
 });

这里是演示
 为简单起见，请参见jQuery UI函数。请记住，然后需要将jqueryui.css和.js脚本添加到页面中。你只需要打个电话

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

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