JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<table width="100%">
        <tr>
            <td class="container left" width="100">
                <a href="javascript:void(0);" id="box1" class="box" role="button"><span>Box 1</span></a>
                <a href="javascript:void(0);" id="box2" class="box" role="button"><span>Box 2</span></a>
                <a href="javascript:void(0);" id="box3" class="box" role="button"><span>Box 3</span></a></td>
            <td class="center">Center Content</td>
            <td class="right" width="200"></td>
        </tr>
    </table>

CSS

body, html {
    font-family: Verdana,Arial,sans-serif;
    border: 0;
    margin: 0;
    padding: 0;
}

.box {
    background-color: #EAEAEA;
    border: 1px solid #CDCDCD;
    color: #2F2F2F;
    cursor: move;
    display: block;
    height: 50px;
    margin: 10px;
    padding: 10px;
    text-align: center;
    width: 50px;
    text-decoration: none;
}

td.left {
    width: 100px;
}

td.right {
    width: 200px;
    background-color: #EAEAEA;
}

td.center {
    background-color: #CACACA;
}

JavaScript

jQuery(document).ready(function($){
    
    $(".container").find(".box").draggable({
        cursor: "move",
        cursorAt: {top: 15, left: 33},
        opacity: 0.7,
        helper: "clone",
        stop: function(event, ui) {
            alert("event: "+event);
            alert("event.target: "+event.target);
            alert("event.target.id: "+event.target.id);
        }
    });
});