元素拖動時不滾動鼠標，滾動div

Question

我開發了一個代碼，其中包含一個表格，其所有單元格都可以放置。表格容器是具有固定高度和滾動條的div。

我想將一個元素（在我的例子中是黃色方塊）拖到我桌子底部的最後一個表格單元格中。一切工作正常，但要在我拖動元素時激活我的div容器的滾動條，我必須始終移動鼠標。

當我的元素在沒有移動鼠標的情況下拖動到div容器底部附近時，是否有可能自動向下滾動？

這是我的例子：http://jsbin.com/upunek/19/edit

在此先感謝

Answer 1

我今天早上弄明白。

我創建setInterval功能，當拖動事件位置位於邊境

這裏的70像素是我做的小提琴：http://jsfiddle.net/pPn3v/22/

var yellow = $('#yellow'); 
var offset = yellow.offset(); 
var offsetWidth = offset.left + yellow.width(); 
var offsetHeight = offset.top + yellow.height(); 

var red = $('#red'); 

var intRightHandler = null; 
var intLeftHandler = null; 
var intTopHandler= null; 
var intBottomHandler= null; 
var distance = 70; 
var timer = 100; 
var step = 10; 


function clearInetervals() 
{ 
    clearInterval(intRightHandler); 
    clearInterval(intLeftHandler); 
    clearInterval(intTopHandler); 
    clearInterval(intBottomHandler);  
} 

red.draggable({ 
    start : function(){}, 
    stop: function(){clearInetervals(); },  
    drag : function(e){ 
     var isMoving = false;   
     //Left 
     if((e.pageX - offset.left) <= distance) 
     { 
      isMoving = true; 
      clearInetervals();    
      intLeftHandler= setInterval(function(){ 
       yellow.scrollLeft(yellow.scrollLeft() - step) 
      },timer); 
      console.log('left') 
     } 

     //Right 
     if(e.pageX >= (offsetWidth - distance)) 
     { 
      isMoving = true; 
      clearInetervals();    
      intRightHandler = setInterval(function(){ 
       yellow.scrollLeft(yellow.scrollLeft() + step) 
      },timer); 
      console.log('right') 
     } 

     //Top 
     if((e.pageY - offset.top) <= distance) 
     { 
      isMoving = true; 
      clearInetervals();    
      intTopHandler= setInterval(function(){ 
       yellow.scrollTop(yellow.scrollTop() - step) 
      },timer); 
      console.log('top') 
     }       

     //Bottom 
     if(e.pageY >= (offsetHeight - distance)) 
     { 
      isMoving = true; 
      clearInetervals();    
      intBottomHandler= setInterval(function(){ 
       yellow.scrollTop(yellow.scrollTop() + step) 
      },timer); 
      console.log('bottom') 
     }  

     //No events 
     if(!isMoving) 
      clearInetervals(); 
    } 
});