JSFiddle - React, Tailwind, and code Playground

by Eric Clemmons

HTML

<h1>jQuery UI - Sortable Issue</h1>

<p>
    For some reason, I cannot get nested ULs (that are empty) to accept drag targets.
</p>

<hr />

<h3>Groups</h3>
<ul id="groups">
    <ul>
        <li>
            <span>Administrators</span>
            <ul>
            </ul>
        </li>
        
    </ul>
</ul>

<hr />

<h3>Users</h3>
<ul id="users">
    <li>Eric</li>
    <li>Richard</li>
    <li>Evan</li>
</ul>

CSS

h1 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

p {
    font-style: italic;
    padding: 1em;
}

ul {
    background: #963;
    -moz-border-radius: 1em;
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
    padding: 1em;
    margin: 1em;
    color: #fff
}
    #users {
        background: #fff;
        color: #000;
    }

.ui-state-highlight {
    border: 2px solid #ffc;
    background: rgba(100%,100%,100%,0.25);
    height: 1em;
}

span {
    font-weight: bold;
    color: #ff0;
}

JavaScript

$('#groups').sortable({
    revert:      'invalid',
    placeholder: 'ui-state-highlight'
});

$('#users li').draggable({
    connectToSortable: '#groups',
    helper:            'clone'
});