1. Home
2. Topic
3. Javascript - Drag-and-drop-object-in-javascript

Drag and drop object in javascript

Drag and drop the image of cat into any of boxes:

Coding as below:

<h3>Drag and drop the image of cat into any of boxes:</h3> <div id="boxes" ondrop="dropboxes(event)" ondragover="Drop(event)"></div> <div id="boxes" ondrop="dropboxes(event)" ondragover="Drop(event)"></div> <div id="boxes" ondrop="dropboxes(event)" ondragover="Drop(event)"></div> <div id="boxes" ondrop="dropboxes(event)" ondragover="Drop(event)"></div> <div id="boxes" ondrop="dropboxes(event)" ondragover="Drop(event)"></div> <img id="drag1" src="https://myinboxhub.co.in/assets/images/cat.jpg" draggable="true" ondragstart="dragElement(event)" width="100" height="100" style="border:1px solid pink"> <style> #boxes { width:120px; height: 100px; padding: 10px; border: 1px solid #aaaaaa; float:left; } </style> <script> function Drop(ev) { ev.preventDefault(); } function dragElement(ev) { ev.dataTransfer.setData("text", ev.target.id); } function dropboxes(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script>