拖动元素而不移动鼠标时滚动div答案

【问题标题】：Scroll div when element is dragging without moving mouse拖动元素而不移动鼠标时滚动div
【发布时间】：2012-05-03 15:50:02
【问题描述】：

我开发了一个代码，其中包含一个表格，其中所有单元格都是可放置的。表格容器是具有固定高度和滚动条的 div。

我想将一个元素（在我的示例中为黄色方块）拖到表格底部的最后一个表格单元格中。一切正常，但要在拖动元素时激活 div 容器的滚动条，我必须一直移动鼠标。

当我的元素在我的 div 容器底部附近拖动而不移动鼠标时，是否可以自动向下滚动？

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

提前致谢

【问题讨论】：

标签： jquery-ui drag-and-drop scroll draggable

【解决方案1】：

我今天早上想通了。

我在拖动事件位置位于边框的70px时创建了setInterval函数

这是我制作的小提琴：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();  
    }
});

【讨论】：

非常感谢您的回答。确实非常感谢。你救我。我也遇到了与您完全相同的问题，我尝试了大约 3 天的工作时间。但你的回答只能解决我的问题。