JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
  </div>

  <div id="div2">
    <div class="draggable"></div>
      <div class="draggable" style="background-color:red;"></div>
      <div class="draggable" style="background-color:blue;"></div>
  </div>

CSS

#div1{
    height : 80px;
    width  : 150px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #ccc;
  }

  #div2{
    margin-top : 10px;
    height     : 50px;
    width      : 150px;
    border     : 1px solid #ccc;
  }

  .demo{
    height           : 10px;
    width            : 140px;
    float            : left;
    position         : relative;
    background-color : orange;
    border           : 1px solid white;
  }

  .draggable{
    height           : 10px;
    width            : 149px;
    background-color : yellowgreen;
  }

JavaScript

$('.draggable').draggable({
    appendTo: "#div1",
    helper: "clone"
});
$('.demo').droppable({
    accept: ".draggable",
    tolerance: "pointer",
    over: function(e, ui) {
        var containerOffset = $("#div1").offset().top;
        var containerHeight = $("#div1").height();
        var currentDraggedOffset = ui.offset.top;

        var demoHeight = $(this).height() * 2;
        var fromBottom = (containerOffset + containerHeight) - currentDraggedOffset;
        var fromTop = currentDraggedOffset - containerOffset;

        if(0 < fromTop && fromTop < demoHeight) {
            $("#div1").scrollTop($("#div1").scrollTop() - demoHeight);
        } else if(0 < fromBottom && fromBottom < demoHeight) {
            $("#div1").scrollTop($("#div1").scrollTop() + demoHeight);
        }
    }
});