鼠标移动时将鼠标光标保持在手柄上
Keeping mouse cursor over the handle when mouse moves
我在这里构建了一个简单的表列调整器:
http://jsfiddle.net/44k6c/
我不能为此使用插件,但我需要模仿这个插件中的功能:
http://quocity.com/colresizable/
我已经设法很好地调整了列的大小,但我的光标被允许离开手柄(第 x 中的灰色框)。我需要以某种方式约束光标,以便在鼠标移动时它停留在手柄上。我已经查看了上面插件的源代码,但它没有阐明如何实现这一目标。
我的js代码正在进行中,目前相当粗糙:
$(document).ready(function () {
var th,
previousColIndex,
nextColIndex,
previousColWidth,
nextColWidth,
thWidth,
currentXPos;
$('.resize').mousedown(function(e) {
currentXPos = e.pageX;
th = $(this).parent();
nextColIndex = th.index() + 1;
nextColWidth = $('table tr th').eq(nextColIndex).width();
thWidth = th.width();
$(document).bind('mousemove',function(e){
if(e.pageX < currentXPos) {
thWidth = thWidth - 1;
nextColWidth = nextColWidth + 1;
$('table tr td').eq(th.index()).css({'width': thWidth + 'px'});
th.css({'width':thWidth + 'px' });
$('table tr td,table tr th').eq(nextColIndex).css({'width': nextColWidth + 'px'});
currentXPos = e.pageX;
} else {
thWidth = thWidth + 1;
nextColWidth = nextColWidth - 1;
$('table tr td').eq(th.index()).css({'width': thWidth + 'px'});
th.css({'width':thWidth + 'px' });
$('table tr td,table tr th').eq(nextColIndex).css({'width': nextColWidth + 'px'});
currentXPos = e.pageX;
}
})
}).mouseup(function(){
$(document).unbind('mousemove');
})
$(document).mouseup(function() {
$(document).unbind('mousemove');
})
})
这个 jsFiddle 能解决问题吗?
您可能在以下行中遇到了问题:
thWidth = thWidth - 1;
nextColWidth = nextColWidth + 1;
它可能应该是:
thWidth = thWidth - currentXPos + e.pageX;
nextColWidth = nextColWidth + currentXPos - e.pageX;
编辑:链接错误。使用这个:http://jsfiddle.net/44k6c/4/
相关文章:
- js:停止鼠标移动
- Zingchart-平移键和鼠标移动
- 在鼠标上触发鼠标移动'的当前位置
- 当用户将鼠标移到屏幕/图表上时,自动滚动将暂停.如果鼠标移动停止,自动滚动将再次恢复
- 如何在谷歌地图上用鼠标移动标记
- 如何在鼠标移动事件时更改图像的窗口中心和宽度
- 如何模仿鼠标移动和事件
- 鼠标点击不会'不起作用,鼠标移动可以
- 有没有办法提高鼠标移动的分辨率
- 如何在JS中随机化backgroundPosition而不使用鼠标移动来制作万花筒的动画
- 如何使用onmousemove函数在每次鼠标移动时更改背景图像
- 使用jQuery/CSS设置的鼠标光标在鼠标移动之前不会更改
- 在谷歌地图中用鼠标移动标记
- 在HTML5画布中绘制鼠标移动的半透明线条
- 如何使用Protractor/Senium将鼠标移动到任意点
- 防止鼠标移动对elementFromPoint的攻击
- 如果鼠标悬停得很快,Jquery鼠标移动会错过一些单元格
- 检查人员是否通过鼠标移动离开网站
- 使用鼠标移动操作选择选项
- 如何在D3Javascript中将鼠标移动到节点上时显示和隐藏节点