[英]How to make resizable with handle dynamically? without ui
我正在尝试创建一个用于调整拖放大小的函数,但我遇到了问题。 该脚本不会立即响应鼠标光标方向的变化。 如果按住按钮不放,然后向右再向左移动光标,它只会暂时增加对象的大小。 演示
使用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>
您需要更新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;
}
});
为简单起见,请参见jQuery UI函数.resizable() 。 只需记住,您将需要在页面中添加jqueryui .css和.js脚本。 然后,您只需致电
$("#some_div_to_resize").resizable();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.