JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="circle" id="drag1" data-id="1" draggable="true" ondragstart="drag(event)"></div>
<div class="rectangle" id="drag3" data-id="3" draggable="true" ondragstart="drag(event)"></div>
<div class="drop-area" ondragover="dragover(event)" ondrop="drop(event)">
drop zone
</div>
<input id="inputField" class="input" type="number" value="0" />

CSS

.circle {
  background: rgb(168, 168, 168);
  border-radius: 50%;
  border: rgb(168, 168, 168) 6px solid;
  width: 80px;
  height: 80px;
  margin: 10px;
}

.rectangle {
  margin: 10px;
  height: 80px;
  background: rgb(168, 168, 168);
  text-align: center;
  border-radius: 7%;
  width: 80px;
  border: rgb(168, 168, 168) 6px solid;
}

.drop-area {
  padding: 50px;
  border: dotted 2px dimgrey;
  margin: 10px;
  text-align: center;
  font-style: italic;
  color: grey;

}
.input {
  margin: 10px;
}

JavaScript

function dragover(ev) {
	ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("id", ev.target.dataset.id);
}

function drop(ev) {
  ev.preventDefault();

  var id = parseInt(ev.dataTransfer.getData("id"), 10);
  
  inputField.value = id;
}