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

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

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

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

使用“

overflow=auto

”它对我很有用

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

---

您不再需要设置timeout/setInterval来平滑滚动。

我提出了以下解决方案：

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

---

溢出=自动已设置，但在可拖放区域不起作用。相反，孔体向下滚动，这是不需要的。是否可以将滚动功能绑定到可拖放区域？

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