HTML5 Drag and Drop example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
	</head>
<body>
<script>
        function DragMe(source, e) {
            e.dataTransfer.setData('Text', source.id);
        }

function DropElement(target, e) {
            var id = e.dataTransfer.getData('Text');

target.appendChild(document.getElementById(id));
            // target.innerHTML = target.innerHTML + "<br />";
        }

function HighlightArea(id, isTrue) {
            isTrue == true ? document.getElementById(id).style.backgroundColor = "yellow" :
            document.getElementById(id).style.backgroundColor = "";
        }
</script>

<body>
<h1>HTML5 Drag and Drop feature example</h1>
    <div>
        <img id="img1" src="http://www.itfunda.com/Images/itfunda.gif" draggable="true" alt="itfunda.com" ondragstart="DragMe(this, event)" />
        <img id="img2" src="http://www.dotnetfunda.com/images/dotnetfunda.png" draggable="true" alt="dotnetfunda.com" ondragstart="DragMe(this, event)" />
        <img id="img3" src="http://farmingfunda.com/images/FarmingFunda.gif" alt="farmingfunda.com" draggable="true" ondragstart="DragMe(this, event)" />
    </div>

Note: We DO NOT save your trial code in our database.

HTML5 > Drag And Drop

Write code here

Output