JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Sortable - Connect lists</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
    #sortable, #draggable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0 0 2.5em; 
      margin-right: 10px; 
   }
    #sortable li, #draggable li { 
      margin: 0 5px 5px 5px; 
      padding: 5px; 
      font-size: 1.2em; 
      width: 120px; 
   }
      
    .marker{
        background: none repeat scroll 0 0 #DDDDDD;
        border-bottom: 1px solid #BBBBBB;
        border-top: 1px solid #BBBBBB;
        display: block;
        height: 20px;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        color: #666;
        font-size: 18px;
        font-style: italic;
    }
      
    #outerDiv{
        background: none repeat scroll 0 0 #EEEEEE;
        height: 100%;
        left: 0;
        position: absolute;
        overflow-y: scroll; 
        top: 0;
        width: 300px;
   }
      
    #innerDiv{
        border: 1px solid #CCCCCC;
        min-height: 400px;
        position:absolute;
    }
    #sortable{
        width: 200px;
        padding: 10px;
        border : 1px solid black;
        min-height: 230px;
    }
      
    #draggable{
        position:absolute;
        top:0;
        right:0;
    }
    .big{
        height: 80px;
    }
    </style>
    <script>
    
    </script>
</head>
<body>
  <div id="outerDiv">
    <div id="innerDiv">
      <ul id="sortable" class="connectedSortable">
      </ul>
    </div>
  </div>
  <ul id="draggable" class="connectedSortable">
    <li class="ui-state-default big">Item 1</li>
    <li class="ui-state-default big">Item 2</li>
    <li...

JavaScript

$(function() {
      $( "#sortable" ).sortable({
           placeholder: "marker",
           axis: "y",
      });
        
      $("#draggable li").draggable({
          cursor: "move",
          revert: "invalid",
          revertDuration: 500,
          connectToSortable: "#sortable",
          containment: 'body',
          helper: function(){ 
            //Hack to append the element to the body (visible above others divs), 
            //but still bellonging to the scrollable container  
            $('#sortable').append('<div id="clone" class="ui-state-default big">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }
      });
    });