JSFiddle - React, Tailwind, and code Playground

by nguyenquangphu

HTML

<p id="p1" draggable="true" ondragstart="drag(event)">kéo tôi đi</p>
<div class="box" ondrop="drop(event)" ondragover="dragover(event)">
  
</div>

CSS

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

JavaScript

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

function drop (event) {
	const data = event.dataTransfer.getData("text")
  	event.target.appendChild(document.getElementById(data));
}

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