JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div style="width:700px;">
    <div class="left">
        <table>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="item">gooo</div>
                </td>
            </tr>
        </table>
    </div>
    <div class="right ui-widget-content">
        <table>
            <tr></tr>
            <tr>
                <td class="time">08:00</td>
                <td class="drop"><span>1</span>
                </td>
                <td class="drop">2</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">09:00</td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
                <td class="drop"></td>
            </tr>
            <tr>
                <td class="time">10:00</td>
                <td class="drop"></td>
             ...

CSS

.left {
    width:120px;
    float:left;
}
.left table {
    background:#E0ECFF;
}
.left td {
    background:#eee;
}
.right {
    float:right;
    width:500px;
}
.right table {
    background:#E0ECFF;
    width:100%;
}
.right td {
    background:#fafafa;
    color:#444;
    text-align:center;
    padding:2px;
}
.right td {
    background:#E0ECFF;
}
.right td.drop {
    background:#fafafa;
    width:100px;
}
.right td.over {
    background:#FBEC88;
}
.item {
    text-align:center;
    border:1px solid #499B33;
    background:#fafafa;
    color:#444;
    width:100px;
}
.assigned {
    border:1px solid #BC2A4D;
}
.trash {
    background-color:red;
}
#resetButtonId {
    display:none;
}

JavaScript

$(function () {
    $('.left .item').draggable({
        revert: 'valid',
        proxy: 'clone'
    });
    $('.right td.drop').droppable({
        onDragEnter: function () {
            $(this).addClass('over');
            $('#resetButtonId').show();
            console.log('hiii');
        },
        onDragLeave: function () {
            $(this).removeClass('over');
            $('.right .drop').show();

        },
        onDrop: function (e, source) {
            $(this).removeClass('over');
            if ($(source).hasClass('assigned')) {
                $(this).append(source);
                $(this).show();
            } else {
                $(this).find('span').hide();
                var c = $(source).clone().addClass('assigned');
                $(this).append(c);
                c.draggable({
                    revert: true
                });
            }
        }
    });

    $('#resetButtonId').click(function () {
        $('.right .drop').find('span').show()
        $(".right .item").empty();
        $(".right .assigned").hide();
        $(".right .droppable").show();
        $(this).hide();
    });
});