保持鼠標光標在手柄上，當鼠標移動

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

我已經成功地在等調整的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

是的，就是這樣。非常感謝 –

保持鼠標光標在手柄上，當鼠標移動

回答

相關問題