Horje
How to create HTML Drag and Drop Example

The example below is a simple drag and drop example:


Example of HTML Drag and Drop Example

The example below is a simple drag and drop example: Drag the Horje Profile image into the rectangle:
index.html
Example: HTML
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://horje.com/avatar.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

Output should be:

Example of HTML Drag and Drop Example
Reffered: https://www.w3schools.com/html/html5_draganddrop.asp





Related Articles
What is HTML Drag and Drop API HTML Drag and Drop API
What browsers will support HTML Drag and Drop HTML Drag and Drop API
How to create HTML Drag and Drop Example HTML Drag and Drop API
How to Make an Element Draggable HTML Drag and Drop API
What to Drag - ondragstart and setData() HTML Drag and Drop API
Where to Drop - ondragover HTML Drag and Drop API
How to Do the Drop - ondrop HTML Drag and Drop API
How to drag and drop an image from left to right HTML Drag and Drop API

Single Articles
Example of HTML Drag and Drop ExampleHTML Drag and Drop API

Read Full:
HTML Drag and Drop API
Category:
Web Tutorial
Sub Category:
HTML Drag and Drop API
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
39



Share on: