JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="classlist">
    <li data-class="1a">1a</li>
    <li data-class="1b">1b</li>
</ul>
<div id="classwrap">
    <div id="1a">
        <ul class="classmembers">
            <li class="classmember">Søren</li>
            <li class="classmember">Susanne</li>
        </ul>
    </div>
    <div id="1b" style="display:none">
        <ul class="classmembers">
            <li class="classmember">Bo</li>
            <li class="classmember">Bodil</li>
        </ul>
    </div>
</div>

CSS

.classlist li {
    display:inline;
    padding:5px 20px;
    list-style-type:none;
    background-color:green;
}
.classmembers {
    padding:10px;
    border:solid 2px #c0c0c0;
    width:200px;
}
.classmember {
    display:inline;
    list-style-type:none;
    pading:10px;
    background-color:red;
    margin:5px;
}

JavaScript

var hovertimer = null;

$(".classlist li").on("click", function () {
    $("#classwrap > div").hide();
    $("#" + $(this).data("class")).show();
});

$(".classmembers li").draggable({
    appendTo: "#classwrap",
    helper: "clone",
    revert: true
}).droppable({
    drop: function (event, ui) {
        alert(ui.draggable.html() + " was dropped on " + $(this).html());
    }
});

$(".classlist li").droppable({
    over: function (event, ui) {
        var droptarget = $(this);
        hovertimer = setTimeout(function () {
            droptarget.click();
        }, 300);
    },
    out: function (event, ui) {
        clearTimeout(hovertimer);
    }
});