JSFiddle - React, Tailwind, and code Playground

by HoRn_

HTML

<p>Drag-n-drop the hammer into the chest</p>
<div id="container">
	<div id="targetContainer">
		<img id="chest" src="https://i.stack.imgur.com/y3C7e.png" />
	</div>
	<img id="hammer" src="https://i.stack.imgur.com/9oV2e.png" />
</div>

CSS

#targetContainer, #tool {
	display: inline;
}

.put {
  position: absolute;
  max-width: 90px;
  left: 50px;
  top: 100px;
}

JavaScript

$('document').ready(function(){
	var hammer = document.getElementById("hammer");
	var chest = document.getElementById("chest");
	var container = document.getElementById("container"); 

	hammer.ondragstart = function(e) {
		console.log('ondragstart e.dataTransfer = ' + e.dataTransfer);
		dragStart(e);
	};

	chest.ondragover = function() {event.preventDefault()}; // allow drop
	chest.ondrop = function() {drop(event)};

	function dragStart(ev) {
		console.log('dragStart ev.originalEvent = ' + ev.originalEvent + '; ev.dataTransfer = ' + ev.dataTransfer + "; ev.type = " + ev.type + "; ev.target.id = " + ev.target.id);
		ev.dataTransfer.setData("text", ev.target.id);
		
		var img = new Image();
		img.src = "https://i.stack.imgur.com/9oV2e.png";
		ev.dataTransfer.setDragImage(img, 0, 0);
	}

	function drag(ev) {
		console.log('drag ev.originalEvent = ' + ev.originalEvent + '; ev.dataTransfer = ' + ev.dataTransfer + "; ev.type = " + ev.type + "; ev.target.id = " + ev.target.id);
		//console.log('drag ev.dataTransfer = ' + ev.dataTransfer);
		//ev.dataTransfer = ev.originalEvent.dataTransfer;
		ev.dataTransfer.setData("text", ev.target.id);
	}

	function drop(ev) {
		ev.preventDefault();
		
		var object;
		
		if (ev.type === 'touchstart') {
			object = ev.target;
		} else {
			var data = ev.dataTransfer.getData("text");
			console.log('here');
			object = document.getElementById(data);
		}
    
    object.ondragstart = '';
    object.className = 'put';
		
		targetContainer.appendChild(object);
	}
	
	document.addEventListener("touchstart", touchHandler, true);
	document.addEventListener("touchmove", touchHandler, true);
	document.addEventListener("touchend", touchHandler, true);
	document.addEventListener("touchcancel", touchHandler, true);  
	
	function touchHandler(event) {
		var touches = event.changedTouches,
			first = touches[0],
			type = "";
		switch(event.type) {
			case "touchstart": type = "dragstart"; break;
			case "touchmove":  type = "mousemove";      break;...