JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<div class="droppable">
    Drop Here
</div>
<ul>
    <li draggable="true">Drag 1</li>
    <li draggable="true">Drag 2</li>
    <li draggable="true">Drag 3</li>
    <li draggable="true">Drag 4</li>
</ul>

JavaScript

(function() {

	function Dropzone(el) {
		this.element = el;

		this.element.addEventListener("dragenter", this.onDragEnter.bind(this));
		this.element.addEventListener("dragover", this.onDragOver.bind(this));
		this.element.addEventListener("drop", this.onDrop.bind(this));
	}

	Dropzone.prototype.onDrop = function(event) {
		var files = event.dataTransfer.files;

		if (files) {
			console.log("you dropped: " + files.length + " files.");
		}
		else {
			console.log("you dropped: " + event.dataTransfer.getData("text"));
		}

		event.preventDefault();
	};

	Dropzone.prototype.onDragEnter = function(event) {
		event.preventDefault();
	};

	Dropzone.prototype.onDragOver = function(event) {
		event.preventDefault();
	};	


	function Droppable(el) {
		this.element = el;

		this.element.addEventListener("dragstart", this.onDrag.bind(this));
	}

	Droppable.prototype.onDrag = function(event) {
		event.dataTransfer.setData("text", event.target.tagName);
	};

	function processDom() {
		var zones = document.querySelectorAll(".droppable"),
			droppable = document.querySelectorAll("a");

		for (var i = 0; i < zones.length; i++) {
			zones[i].dataset.dropzone = new Dropzone(zones[i]);
		}

		for (var i = 0; i < droppable.length; i++) {
			droppable[i].dataset.droppable = new Droppable(droppable[i]);
		}
	}

	document.addEventListener("DOMContentLoaded", processDom);
}());