当元素拖动而不移动鼠标时，滚动div [英] Scroll div when element is dragging without moving mouse

问题描述

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

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

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

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

提前感谢

解决方案

我今天早上想到了。

当拖动事件位置位于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; 
 
 
函数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'）
} 
 
 //右
 if（e.pageX> =（offsetWidth  -  distance））
 {
 isMoving = true; 
 clearInetervals（）; 
 intRightHandler = setInterval（function（）{
 yellow.scrollLeft（yellow.scrollLeft（）+ step）
 }，timer）; 
 console.log（'right'）
} 
 
 //顶部
 if（ （e.pageY  -  offset.top）< = distance）
 {
 isMoving = true; 
 clearInetervals（）; 
 intTopHandler = setInterval（function（）{
 yellow.scrollTop（yellow.scrollTop（） -  step）
}，timer）; 
 console.log（'top'）
} 
 
 //底部
 if（e.pageY> =（offsetHeight  -  distance））
 {
 isMoving = true; 
 clearInetervals（）; 
 intBottomHandler = setInterval（function（）{
 yellow.scrollTop（yellow.scrollTop（）+ step）
}，timer）; 
 console.log（'bottom'）
} 
 
 //没有事件
如果（！isMoving）
 clearInetervals（）; 
} 
}）; 
  

I developped a code including a table with all its cells as droppable. The table container is div with a fix height and a scrollbar.

I would like drag an element (yellow square in my example) into the last table cell at the bottom of my table. Everything works fine, but to activate the scrollbar of my div container when I am dragging the element, I must move the mouse all the time.

Is there a possibility to scroll down automatically when my element is dragging near the bottom of my div container without moving mouse?

Here is my example : http://jsbin.com/upunek/19/edit

Thanks in advance

解决方案

I figure it out this morning.

I created setInterval function when the drag event position is located at 70px of the border

Here is the fiddle I made : 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();  
    }
});

​

这篇关于当元素拖动而不移动鼠标时，滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！