如何防止 jQuery 拖动滚动？

Question

当从div1 拖动到div2 时，我有两个div，div1 滚动条将出现并一直延伸到我将元素拖动到div2 上。当我将元素拖到里面时，如何防止div 延伸？整个我拖动的元素不会中断？

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 hidden-sm hidden-xs">
      <div id='external-events'>
        <h4>Draggable Events</h4>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
        <div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
      </div>
    </div>
    <div class="col-md-5 col-sm-12 col-xs-12">
      <hr>
      <div id="calendar"></div>
      //drop event here
    </div>
</div>

拖动面板 CSS 和大小

#external-events {
  float: left;
  max-width: 260px;
  width: 260px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  margin-left: -10px;
}

拖动后

拖后应该是这样的

Answer 1

尝试删除 overflow-y: auto 并添加 overflow: hidden 到您的#external-events。

编辑

来自 Stack Overflow 的This answer 可能有助于阐明如何在使用draggable 元素时防止 jQuery 滚动页面。如果没有工作示例，我不能 100% 确定这就是您在谈论的内容，但希望它被证明是有帮助的。

编辑 2

在您发布的图片中，它看起来像是在滚动x-axis 上的溢出。这意味着您需要将 overflow-x: hidden 添加到 #externalevents 样式中。您可以在代码中保留overflow-y: auto。