JSFiddle - React, Tailwind, and code Playground

by Peunage

HTML

<div id="main">
    <div class="div">
        div 1. drag me
    </div>
    <div class="div">
        div 2. drag me to another div
    </div>
    <div class="div">
        div 3. me too
    </div>
    <div class="div">
        div 4
    </div><br />
</div>

CSS

#main {
    width: 600px;
    height: 500px;
    border: 1px solid blue;
}
.div {
    height: 100px;
    width: 200px;
    border: 1px solid red;
    float: left;
    margin: 5px;
    padding: 5px;
}

#bigdiv {
    position: absolute;
    top: 300px;
    margin: 5px;
    border: 1px solid red;
    width: 400px;
    height: 200px;
}

JavaScript

$('#main').sortable({containment: 'parent', opacity: 0.60});