JSFiddle - React, Tailwind, and code Playground

by stevebeauge

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="container">
    <div class="table-wrapper">
        <table width="100%">
            <tbody class='list'>
                <tr class="item">
                    <td>
                        <div>foo 01
                            <div class='hovered'>Hover me</div>
                        </div>
                        <div>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his</div>
                    </td>
                </tr>
                <tr class="item">
                    <td>
                        <div>foo 02
                            <div class='hovered'>Hover me</div>
                        </div>
                        <div>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his</div>
                    </td>
                </tr>
                <tr class="item">
                    <td>
                        <div>foo 03
                            <div class='hovered'>Hover me</div>
                        </div>
                        <div>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his</div>
                    </td>
                </tr>
                <tr class="item">
                    <td>
                        <div>foo 04
                            <div class='hovered'>Hover me</div>
                        </div>
                        <div>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

.container {
    width:300px;
    height:600px;
    background-color:#FFCCCC;
    display:inline-block;
}
.list .item {
    cursor:move;
    border: solid 1px silver
}
.list .item .hovered {
    position:relative;
    right:0px;
    display:inline-block;
    width:100px;
    height:25px;
    border:solid blue 1px;
}
.list .item:hover .hovered {
    color:red;
    border:solid red 3px;
    cursor:pointer;
}
.list .item:hover .hovered:before {
    content:"";
    position: absolute;
    top: 0px;
    width: 0;
    height: 0;
    right: -12px;
    border-style: solid;
    border-color: #454545 transparent transparent transparent;
    border-width: 15x 15px 0 0;
}
.helper {
    width:120px;
    height:50px;
    background-color:lightblue;
}
.placeholder {
    background-color:green;
}
.dropZone .table-wrapper {
    border:solid 1px green;
}

JavaScript

function pausecomp(millis) {
    var date = new Date();
    var curDate = null;

    do {
        curDate = new Date();
    }
    while (curDate - date < millis);
}



$(function () {

    $(".hovered").mousedown(function () {
        var $this = $(this);
        window.setTimeout(function () {
            $this.html($this.html() + " !");
        }, 1500);
    });

    $(".list").sortable({
        connectWith: ".list",
        helper: function () {
            return '<td><div class="helper">x</div></td>';
        },
        stop: function () {
            pausecomp(500); // Artificial lag
        },
        start: function (e, ui) {
            ui.placeholder.html("<td><div class='phd'>&nbsp;</div><hr/></td>");
            $(".container").addClass("dropZone");
            pausecomp(250); // Artificial lag
            $(this).sortable("refreshPositions");
        },
        placeholder: "placeholder"


    }

    ).disableSelection();

});