Drag Drop


Drag Drop

Using drag and drop api, an element can be dragged from one place to another. The various events for drag drop are as follows: Drag, Dragstart, Dragenter, Dragover, Dragleave, Drop, Dragend.

The stages which are included in the drag drop operation are as follows:

  • To make an element draggable
  • To decide what to drag
  • To decide where to drop
  • Perform the drop action

Example

<html> <head> <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> </head> <body> <h2>Knowledge2life</h2> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="/img/knowledge2life.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31" alt="Image Not found"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>

OUTPUT

Knowledge2life