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:60px;
    left:130px;
}


#box2 {
    width:100px;
    height:100px;
    background-color:lime;
    top:77px;
    left:147px;
}
#box3 {
    width:75px;
    height:75px;
    background-color:orange;
    top:95px;
    left:166px;
}


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

JavaScript

var dropOps = {
    drop : dropHandler
    
}
var lastDroppable;
var timestamp;
var th = null;
var times = new Array();
function dropHandler(e,ui) {
    lastDroppable = this;
    times.push(Date.now());  
//    console.log(timestamp + ": dropping into", this);
    if(th) clearTimeout(th);
    th = setTimeout(handleLastDrop, 10);
}
function handleLastDrop() {
    timestamp = Date.now();  
    console.log(timestamp + " last droppable = ", lastDroppable, times);
}

$(function(){        // ready
    $('.box').draggable();
    $('#box1,#box2,#box3').droppable(dropOps);
});