JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div style="float:left;width:500px;">
    <div>Available employee</div>
    <ul id="available1" class="items">
        <li class="list availablelist">Jhonny</li>
    </ul>
    <ul id="available2" class="items">   
        <li class="list availablelist">Tim</li>
    </ul>
    <ul id="available3" class="items">   
        <li class="list availablelist">George</li>
    </ul>
    <ul id="available4" class="items">   
        <li class="list availablelist">Melissa</li>
    </ul>
    <ul id="available5" class="items">   
        <li class="list availablelist">Alice</li>
    </ul>
</div>
<div style="clear:both"></div>
<div id="timetable" style="float:left;width:700px;">
    <div style="text-align:center">Time table</div>
    <div class="weekday">Monday
        <ul class="items">
            <li class="list">Jhonny</li>
            <li class="list">Tim</li>
            <li class="list">George</li>
            <li class="list">Melissa</li>
            <li class="list">Alice</li>
        </ul>
    </div>
    <div class="weekday">Tuesday
        <ul class="items">
            <li class="list">Jhonny</li>
            <li class="list">Tim</li>
            <li class="list">George</li>
            <li class="list">Melissa</li>
            <li class="list">Alice</li>
        </ul>
    </div>
    <div class="weekday">Wednesday
        <ul class="items">
            <li class="list">Jhonny</li>
            <li class="list">Tim</li>
            <li class="list">George</li>
            <li class="list">Melissa</li>
            <li class="list">Alice</li>
        </ul>
    </div>
    <div class="weekday">Thursday
        <ul class="items">
            <li class="list">Jhonny</li>
            <li class="list">Tim</li>
            <li class="list">George</li>
            <li class="list">Melissa</li>
            <li class="list">Alice</li>
        </ul>
    </div>
    <div class="weekday">Friday
        <ul class="items">
            <li class="list">Jhonny</li>
            <li...

CSS

.bar {
    width: 100px;
    height: 20px;
    margin: 2px;
    border: 1px solid black;
    background-color: lightgreen;
    text-align: center;
    float: left;
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    border-radius: 3px;
}
 
.list {
    background-color: lightblue;
    border: 1px solid gray;
}
 
.items .ui-selected {
    background: red;
    color: white;
    font-weight: bold;
}
 
.items {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
}
 
.items li {
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    border-radius: 3px;
}
 
.weekday {
    float: left;
}
 
.availablelist {
    background-color: orange;
    display: inline;
}

JavaScript

$(function () {
        $("#timetable .items").sortable({
                connectWith: "ul"  
        });
         
        $("ul[id^='available']").draggable({
            helper: "clone",
            connectToSortable: ".items"
        });
    });