JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">

    <li>Item 1</li>
    <li>Item 2</li>
        <li>Item 3</li>
        <li>
            <table style="border: 1px solid black;">
                <tr>
                    <td>
                        <ul class="list">
                            <li>col 1 item 1</li>
                        </ul>
                    </td>
                    <td>
                        <ul class="list">
                            <li>col 2 item 1</li>
                        </ul>
                    </td>
                    <td>
                        <ul class="list">
                            <li>col 3 item 1</li>
                        </ul>
                    </td>
                    <td>
                        <ul class="list">
                            <li>col 4 item 1</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </li>
        <li>Item 4</li>
        <li>Item 5</li>
  </ul>
    
    <ul class="draggable">
        <li>drag 1</li>
        <li>drag 2</li>
        <li>drag 3</li>
    </ul>

CSS

ul.list {
  list-style:none;
  padding:none;
  margin:none;
  border:1px solid #EFEFEF;}
ul.list:hover {
  border:1px dotted #333;}
.highlight { background: blue; height: 1px; padding: 0px; margin: 0px; }
li, ul {padding: 5px; }

JavaScript

$(function() {

    $("ul.list").sortable({
        connectWith: '.list',
        revert: true,
        helper: 'clone',
        placeholder: 'highlight',
        greedy: true,
        tolerance: 'pointer'
    });

    $('.draggable li').draggable({
        helper: "clone",
        connectToSortable: 'ul.list',
        revert: "invalid"
    });
 
});