保持鼠标光标在手柄上，当鼠标移动

我不能使用插件，但我需要在这个插件模仿功能：

我已经成功地在等调整的cols很好，但我的光标是否允许从手柄（在第灰色框）移开。我需要以某种方式约束光标，使其在鼠标移动时保持在句柄之上。我已经查看了上面插件的源代码，但它没有阐明如何实现这一点。

我的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'); 

}) 
})

来源

2013-09-25 Mike Rifgin

我不认为你，也不认为你应该限制游标。光标内置于OS中。也许这是可能的，但我仍然认为尝试重写这样的基本功能是不好的。 – Chad

嗯，我认为把它移动好得多，唯一的问题是鼠标移动的方式相反。不知道如何阻止它，但这将是不太直观的IMO。 – Virus721

这是否jsFiddle解决这个问题？

你可能曾在此行的一个问题：

thWidth = thWidth - 1; 
nextColWidth = nextColWidth + 1;

大概应该是：

thWidth = thWidth - currentXPos + e.pageX; 
nextColWidth = nextColWidth + currentXPos - e.pageX;

编辑： 不良链接。使用这一个：http://jsfiddle.net/44k6c/4/

来源

2013-09-25 13:58:39 matewka

是的，就是这样。非常感谢 –

保持鼠标光标在手柄上，当鼠标移动

回答

相关问题