Horje
How to drag and drop an image from left to right | HTML Drag and Drop API Code
How to drag and drop an image from left to right

Here is an example to drag drop an image from left to right


Example of drag and drop an image from left to right

Follow the Example
index.html
Example: HTML
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</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)">
  <img src="https://horje.com/avatar.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Output should be:

Example of drag and drop an image from left to right
Reffered: https://www.w3schools.com/html/html5_draganddrop.asp



Read Full::
HTML Drag and Drop API Code
Category:
HTML Code
Sub Category:
HTML Drag and Drop API Code
Uploaded:
1 month ago
Uploaded by:
Admin
Views:
1

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

Single Articles
Example of drag and drop an image from left to right

Share on: