<html><head>
<title>HTML5 Drag & 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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.