滚动DIV内doppable的，而底部

Question

我有一个滚动的div中多，可拖动的div拖近。当我将它们拖放到可拖放区域（也是一个可滚动的div）时，doppable DIV不会向下滚动。只是页面正在移动。 如何说，只要droppable div应该在拖动时滚动？

这里是制作的div拖动

$(".drag_item").draggable({ 
     helper: 'clone', 
     scroll: true, 
     drag: function(event, ui) { 
      $(this).css('z-index','100'); 
     } 
    }); 

Answer 1

使用 “overflow=auto” 我的作品我现在的jQuery代码。

<div style="overflow:auto;"></div> 

OR

jQuery的现在支持scrollTop的作为动画变量。

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100}); 

您不再需要的setTimeout/setInterval的顺利滚动。

Answer 2

我想出了这个解决方案：

var direction = {}; 
var bound = {}; 
var scrolling = false; 
var container = document.getElementById("container"); 

$('#table-container') 
.on('dragstart', draggable, function(event, ui) { 
    bound = { 
    right : $(container).offset().left + $(container).width() - 50, 
    left : $(container).offset().left + 50, 
    top : $(container).offset().top + 50, 
    bottom : $(container).offset().top + $(container).height() - 50 
    }; 
}) 
.on('dragstop', draggable, function(event, ui) { 
    direction = {}; 
}) 
.on('drag', draggable, function(event, ui) { 
    direction.right = event.clientX - bound.right; 
    direction.left = bound.left - event.clientX; 
    direction.up = bound.top - event.clientY; 
    direction.down = event.clientY - bound.bottom; 

    if ((direction.right > 0 || direction.left > 0|| direction.up > 0 || direction.down > 0) && !scrolling) { 
    scroll(); 
    scrolling = true; 
    } else { 
    scrolling = false; 
    } 
}); 

function scroll() { 
    if (direction.right > 0) { 
    container.scrollLeft = container.scrollLeft + (direction.right >> 1); //dividing by 2 to soften effect 
    } 
    if (direction.left > 0) { 
    container.scrollLeft = container.scrollLeft - (direction.left >> 1); 
    } 
    if (direction.down > 0) { 
    container.scrollTop = container.scrollTop + (direction.down >> 1); 
    } 
    if (direction.up > 0) { 
    container.scrollTop = container.scrollTop - (direction.up >> 1); 
    } 

    if (direction.right > 0 || direction.left > 0 || direction.up > 0 || direction.down > 0) { 
    setTimeout(scroll, 100); 
    } 
}