Whenever I drag an element from div1 to div2, the scrollbar in div1 keeps extending until I drop the element in div2. How can I prevent this extension without breaking the element being dragged?
<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 and Size for Drag Panel
#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;
}
After Dragging
https://i.sstatic.net/oUMKv.png
Expected Outcome After Dragging https://i.sstatic.net/KfHvk.png