<html><head>
<title>HTML5 Drag &amp; Drop Example - 1</title>
<style type="text/css">
body{font-family:arial;}

.mover {
width:60px;
height:4em;
line-height:4em;
margin:10px;
padding:5px;
float:left;
background:#ffff99;
border:1px dotted #333333;
text-align:center;
}
</style>
<script type="text/javascript" async="" src="https://mc.yandex.ru/metrika/watch.js"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script type="text/javascript">

function dragWord(dragEvent){
dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent+"|"+dragEvent.target.parentNode.id);
}

function dropWord(dropEvent){
var dropData = dropEvent.dataTransfer.getData("text/html");
var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0];
dropEvent.preventDefault();
}

</script>
</head>
<body>

<div id="box1" class="mover" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div draggable="true" ondragstart="dragWord(event)">Page</div>
</div>

<div id="box2" class="mover" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div draggable="true" ondragstart="dragWord(event)">This</div>
</div>

<div id="box3" class="mover" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div draggable="true" ondragstart="dragWord(event)">Web</div>
</div>

<div id="box4" class="mover" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div draggable="true" ondragstart="dragWord(event)">Is</div>
</div>

<div id="box5" class="mover" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div draggable="true" ondragstart="dragWord(event)">Nice</div>
</div>

<div id="box6" class="mover" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<div draggable="true" ondragstart="dragWord(event)">A</div>
</div>

</body></html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.