JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="tcDropZone"></div>
    <div class="tcDropZone"></div>

CSS

.tcDropZone {
        height:200px;
        width:200px;
        margin:20px;
        border: 3px dotted green;
    }

JavaScript

$(".tcDropZone").each(function (e) {

        $(this).on("dragover",function (e) {
            e.preventDefault();
            e.stopPropagation();

            $(this).css("background-color","blue");
        });

        $(this).on("dragleave", function (e) {
            e.preventDefault();
            e.stopPropagation();

            $(this).css("background-color","");
        });
        
        $(this).on("drop", function (e) {
        	e.preventDefault();
          let dt = e.dataTransfer
          console.log(dt)
  				let files = dt.files
          console.log(files)
        });
    });