JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://nightly.datatables.net/css/jquery.dataTables.css">
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<div><h3>Draggable inside scrollable problem</h3> The problem is that dragging a link outside of the data table causes the box to scroll and you lose your place. Plus the clone of the dragged item doesn't appear outside of the table.
      
      <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
              <td><a href='1' class="makeMeDraggable">Tiger Nixon</a></td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
              <td><a href='3' class="makeMeDraggable">Garrett Winters</a></td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
              <td><a href='4' class="makeMeDraggable">Ashton Cox</a></td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
              <td><a href='5'...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

#makeMeDroppable { float:left;  width: 250px; height: 50px; border: 5px solid orange; }
/*#makeMeDraggable { float: right; width: 30px; height: 50px; background: red; }  */

#status{float:right;width: 250px; height: 50px; border: 5px dashed green;}

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable({
      "scrollX": true,
      "scrollCollapse": true,
      "bJQueryUI": true,
      "scrollY": 140 });
    
    $( init1 );
    $( init2 );
    
    $( ".makeMeDraggable" ).on( "drag", function( event, ui ) {
     
        $('#status').html("dragging");
    		} );
    $( ".makeMeDraggable" ).on( "dragstop", function( event, ui ) {
     $('#status').html("Stopped dragging");
    	} );
} );

function init1() {
  $('.makeMeDraggable').each(function(i) {
      $(this).draggable({
        delay: 100,
       helper: 'clone',
    revert: 'invalid',
    appendTo: 'body',
        containment: "document"});
                      
  })}
      
  function init2() {    
  $('#makeMeDroppable').droppable( {
    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
  alert( 'A Link was dropped onto me! with a URL of: ' + draggable.attr('href') );
}