javascript - 在底部附近拖动时在可多普的 DIV 内滚动

Question

我在可滚动的 div 中有多个可拖动的 div。当我将它们拖到可放置区域（也是可滚动的 div）时，可放置的 DIV 不会向下滚动。只是页面在移动。怎么说，只有可放置的 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>

或者

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

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

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