JSFiddle - React, Tailwind, and code Playground

by g33ky

HTML

<table border=1>
    <tr>
        <td>
            <ul id='sourceUl'>
                <li class='item'>Apple</li>
                <li class='item'>Banana</li>
                <li class='item'>Orange</li>
            </ul>
        </td>
        <td id='targetTd'>
            <ul id='targetUl'><li class='item'>Pineapple</li></ul>
        </td>
    </tr>
</table>

CSS

ul {
    padding:0;
    margin: 0;
}
li.item {
    cursor:move;
    text-align:center;
    width:80px;
    list-style:none;
    margin:5px auto;
    background:#eeeeee;
    border:1px solid #000000;
}
td {
    width:100px;
    height:300px;
    vertical-align:top;
}

JavaScript

$(function() {
    $( "#targetUl" ).sortable({
      revert: true
    });
    $( ".item" ).draggable({
      connectToSortable: "#targetUl",
        helper:"clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  });