Horje
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





Category:
Web Tutorial
Sub Category:
HTML Drag and Drop API
Uploaded by:
Admin


Read Article
https://develop.horje.com/learn/1434/reference