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"
});
$('#div1').droppable({
    accept: ".draggable",
    drop: function(e, ui) {
        $(ui.draggable).addClass("demo");
        $(ui.draggable).appendTo($(this));
        $(this).scrollTop($(this).height());
    }
});