JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="dragtarget">
    <span>File over/out here</span>
    <br/><br/>
    <span>more text here</span>
</div>

CSS

#dragtarget {
    border: 1px dashed red;
    height: 150px;
    width: 150px;
    padding: 50px;
}
span {
    padding: 2px;
    border: 1px solid magenta;
}

JavaScript

var count = 0;

$('#dragtarget').on('dragenter', function() {

    $(this).css({borderStyle: 'solid'});
    
    $(this).append('<span>' + count++ + '</span><br/>');
    
    event.stopPropagation();
    event.preventDefault();
    return false;

}).on('dragleave', function() {

    $(this).css({borderStyle: 'dashed'});

    event.stopPropagation();
    event.preventDefault();
    return false;
});