我开发了一个代码,包括一个表,其所有单元格都是可放置的。表容器是div,具有固定高度和滚动条。
我想将一个元素(在我的示例中为黄色方块)拖动到表格底部的最后一个表格单元格中。一切正常,但是当我拖动元素时激活我的div容器的滚动条,我必须一直移动鼠标。
当我的元素在我的div容器底部附近拖动而不移动鼠标时,是否有可能自动向下滚动?
以下是我的示例:http://jsbin.com/upunek/19/edit
提前致谢
答案 0 :(得分:5)
今天早上我明白了。
当拖动事件位置位于边框的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();
}
});