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>

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