HTML Drag and Drop Example

SUBMITTED BY: kozma01

DATE: Aug. 24, 2017, 1:54 p.m.

FORMAT: Text only

SIZE: 595 Bytes

Raw Download

HITS: 5430

Report
  1. Example
  3. <!DOCTYPE HTML>
  4. <html>
  5. <head>
  6. <script>
  7. function allowDrop(ev) {
  8. ev.preventDefault();
  9. }
  11. function drag(ev) {
  12. ev.dataTransfer.setData("text", ev.target.id);
  13. }
  15. function drop(ev) {
  16. ev.preventDefault();
  17. var data = ev.dataTransfer.getData("text");
  18. ev.target.appendChild(document.getElementById(data));
  19. }
  20. </script>
  21. </head>
  22. <body>
  24. <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  26. <img id="drag1" src="img_logo.gif" draggable="true"
  27. ondragstart="drag(event)" width="336" height="69">
  29. </body>
  30. </html>
  31. Try it Yourself ยป
comments powered by Disqus