JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id="box1" class="box">box1</div>
<div id="box2" class="box">box2</div>
<div id="box3" class="box">box3</div>
<div id="box4" class="box">box4</div>

CSS

.box {
    border:1px solid black;
    position:absolute;
    cursor : pointer;
}

#box1 {
    width:125px;
    height:125px;
    background-color:tan;
    top:120px;
    left:200px;
}


#box2 {
    width:100px;
    height:100px;
    background-color:lime;
    top:100px;
    left:20px;
}
#box3 {
    width:75px;
    height:75px;
    background-color:orange;
    top:30px;
    left:150px;
}


#box4 {
    width:50px;
    height:50px;
    background-color:beige;
    left:30px;
}

JavaScript

var box_dragOps = {
    stop:box_stopDrag
}
function box_stopDrag(e,ui) {
    debugger;
    x=1;
}
$(function(){
    $('.box').draggable(box_dragOps);
});