JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<div class="dropzone">
    Please drop something here!
    <a href="#">Yeah!</a>
</div>

<table>
    <tbody class="log">
        
    </tbody>
</table>

CSS

.dropzone {
    text-align: center;
    padding: 30px;
    border: 5px dashed green;
}

JavaScript

var id = 0
var trs = []

$('.dropzone').on('dragstart drag dragenter dragleave dragover drop dragend', function(event) {
    var e = event.originalEvent
    var html = '<tr><td>' + (++id) + '</td><td>' + e.type + '</td><td>' + e.target.nodeName + '</td><td>' + e.relatedTarget + '</td></tr>'
    var tr = $(html)
    trs.unshift(tr)
    $('.log').prepend(tr)
    e.preventDefault()
    while (trs.length > 10) trs.pop().remove()
})