JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div id="div1" class="box">
    <div class="dragger"></div>
</div>
<div id="div2" class="box">
    <div id="target"></div>
</div>

CSS

body, html {
    margin: 0;
    height: 100%;
    overflow: hidden;
}
.box {
    border: 0px solid Black;
    display: Block;
    padding: 4px;
    margin: 0;
}
#div1 {
    width: calc(100% - 2);
    height: 50%;
    background-color: #ccc;
}
#div2 {
    width: calc(100% - 2);
    height: 50%;
    background-color: #ddd;
}
.dragger {
    width: 30px;
    height: 30px;
    border: 1px solid Black;
    background-color: #dbb;
    z-index: 999;
}
#target {
    width: 100px;
    height: 60px;
    position: relative;
    top: 20px; left: 20px;
    border: 1px solid Black;
    background-color: #da6;
    z-index: 3;
}

JavaScript

(function($) {

    
    var div1 = $("#div1");
    var div2 = $("#div2");
    
    var dragger = $(".dragger").draggable({});


}(jQuery));