van an nguyen

Drag and drop HTML elements

Drag and drop images or any HTML element within a document

We saw the main principles of HTML5 drag and drop in the previous sections. There are other interesting uses that differ in the way we copy and paste things to/from the clipboard. The clipboard is accessed through the dataTransfer property of the different events:

  1. event.dataTransfer.setData(“Fruit”, event.target.dataset.value);
  2. …
  3. var data = event.dataTransfer.getData(“Fruit”);

<IMG> elements are all draggable by default!

Normally, to make an element draggable, you must add the draggable=true attribute. <img> elements are an exception: they are draggable by default! The next example shows how to drag and drop an image from one location in the document to another.

Example: move images as an HTML subtree

Try this example (adapted from braincracking.org (in French)) in your browser below or play with it at CodePen:

https://codepen.io/w3devcampus/embed/xwxEZg?user=w3devcampus&default-tab=result&slug-hash=xwxEZg&theme-id=0&height=307&name=cp_embed_1

Code from the example:

  1. <html lang=”en”>
  2. <head>
  3. <style>
  4.    .box {
  5.       border: silver solid;
  6.       width: 256px;
  7.       height: 128px;
  8.       margin: 10px;
  9.       padding: 5px;
  10.       float: left;
  11.    }
  12. </style>
  14.     function drag(target, evt) {
  15.         evt.dataTransfer.setData(“Text”, target.id);
  16.     }
  17.     function drop(target, evt) {
  18.         var id = evt.dataTransfer.getData(“Text”);
  19.         target.appendChild(document.getElementById(id));
  20.         // prevent default behavior
  21.         evt.preventDefault();
  22.     }
  24. </head>
  25. <body>
  26. Drag and drop browser images in a zone:<br/>
  27.    <img src=“http://html5demo.braincracking.org/img/logos/chrome1.png&#8221; id=“cr”      
  28.         ondragstart=“drag(this, event)“ alt=“Logo Chrome”>
  29.    <img src=“http://html5demo.braincracking.org/img/logos/firefox1.png&#8221; id=“ff”
  30.         ondragstart=“drag(this, event)“ alt=“Logo Firefox”>
  31.    <img src=“http://html5demo.braincracking.org/img/logos/ie1.png&#8221; id=“ie”
  32.         ondragstart=“drag(this, event)“ alt=“Logo IE”>
  33.    <img src=“http://html5demo.braincracking.org/img/logos/opera1.png&#8221; id=“op”
  34.         ondragstart=“drag(this, event)“ alt=“Logo Opera”>
  35.    <img src=“http://html5demo.braincracking.org/img/logos/safari1.png&#8221; id=“sf”
  36.         ondragstart=“drag(this, event)“ alt=“Logo Safari”><br/>
  38.    
     class=“box” ondragover=“return false“ ondrop=“drop(this, event)“>
  39.         

    Good web browsers

  40.    
  •    
     class=“box” ondragover=“return false“ ondrop=“drop(this, event)“>
  •         

    Bad web browsers

  •    
  • </body>
  • </html>