JSFiddle - React, Tailwind, and code Playground

by oeffe

HTML

<div id='main'>
    <div id='left'>
        <div class='box'></div>
    </div>
    <div id='right'>
        <div id='thespace'>Place in here</div>
    </div>
</div>

CSS

#main{width:100%;margin:0 auto;height:100%;}
#left{width:200px;height:100%;position:absolute;left:0;top:0;float:left;border-right:1px solid black;background-color:#eee;}
#right{float:left;height:100%;}

.box{width:100px;height:100px;background-color:red;left:50px;top:50px;}


#thespace{width:200px;height:200px;background-color:black;left:300px;top:50px;position:absolute;color:white;font-size:1em;text-align:center;padding-top:2em;}

JavaScript

$('.box').draggable({
    helper: "clone",
    containment: "#right",
}).on('dragstart', function (e, ui) {
    $(ui.helper).css('z-index','999999');
}).on('dragstop', function (e, ui) {
    $(this).after($(ui.helper).clone().draggable());
});