gpt4 book ai didi

javascript - 如何动态调整 handle 的大小?没有用户界面

转载 作者:行者123 更新时间:2023-11-30 06:35:35 25 4
gpt4 key购买 nike

我正在尝试创建一个用于拖放调整大小的函数,但我遇到了问题。该脚本不会立即对鼠标光标方向的变化使用react。如果我按住按钮并将光标向右移动,然后向左移动,它只会暂时增加对象的大小。 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>

最佳答案

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

关于javascript - 如何动态调整 handle 的大小?没有用户界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14758011/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com