在可拖动的DIV内滚动，同时拖动底部附近

Question

我在可滚动的div中有多个可拖动的div。当我将它们拖动到可放置区域（也是可滚动的div）时，可掺杂的DIV不会向下滚动。只是页面正在移动。 怎么说，只有droppable div应该在拖动时滚动？

这是我当前用于使div可拖动的jquery代码

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

Answer 1

我提出了这个解决方案：

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);
  }
}

Answer 2

使用“overflow=auto”它对我有用。

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

OR

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

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

您不再需要setTimeout / setInterval来平滑滚动。