title: Drag and drop Multiple html elements at once
body: <h2>Is there a HTML5 default way for dragging and dropping -multiple- elements into another html element on the same page?</h2>
  
  <p>It seems the HTML5 attribute <code>draggable</code>, which applies to one element says: "You can drag me, but you'd need multiple input devices to select another draggable element at the same time."</p>
  
  <p>As a workaround one can add identifiers to selected elements using js and get all selected elements on a certain event and do what we want. But is this really the "correct" way?</p>
  
  <p>When you inspect the <code>drop</code> event there is an interface for multiple files, when handling file drag and drop. And there is also the <code>items</code> property- at least in Chrome. </p>
  
  <p>There are differences across browsers.</p>
  
  <h2>In Chrome</h2>
  
  <p>The <code>drop</code> event contains the <code>items</code> property</p>
  
  <pre><code>dataTransfer: DataTransfer
      items: DataTransferItemList
          length: 0
  </code></pre>
  
  <p><code>Items</code> seems to be 0, no matter if you dragged an item or not. </p>
  
  <h2>In Firefox</h2>
  
  <p>The <code>drop</code> event contains the <code>mozItemCount</code> property</p>
  
  <pre><code>dataTransfer: DataTransfer
      mozItemCount: 1
  </code></pre>
  
  <p><code>mozItemCount</code> seems to be at least 1. </p>
  
  <hr>
  
  <h2>Here is a little demo</h2>
  
  <p>Where you can observe your developer tools console:</p>
  
  <p><strong>This source was taken from here: <a href="http://www.html5rocks.com/en/tutorials/dnd/basics/">http://www.html5rocks.com/en/tutorials/dnd/basics/</a></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
    // Copied from: http://www.html5rocks.com/en/tutorials/dnd/basics/
    var cols_ = document.querySelectorAll('.column');
    var dragSrcEl_ = null;
  
    handleDragStart = function(e) {
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
  
      dragSrcEl_ = this;
  
      this.style.opacity = '0.4';
  
      // this/e.target is the source node.
      $(this).addClass('moving');
    };
  
    handleDragOver = function(e) {
      if (e.preventDefault) {
        e.preventDefault(); // Allows us to drop.
      }
  
      e.dataTransfer.dropEffect = 'move';
  
      return false;
    };
  
    handleDragEnter = function(e) {
      $(this).addClass('over');
    };
  
    handleDragLeave = function(e) {
      // this/e.target is previous target element.
  
      $(this).removeClass('over');
    };
  
    handleDrop = function(e) {
      // this/e.target is current target element.
      console.log(e.dataTransfer);
  
      if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.
      }
  
      // Don't do anything if we're dropping on the same column we're dragging.
      if (dragSrcEl_ != this) {
        dragSrcEl_.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
      }
  
      return false;
    };
  
    handleDragEnd = function(e) {
      // this/e.target is the source node.
      this.style.opacity = '1';
  
      [].forEach.call(cols_, function (col) {
        $(col).removeClass('over');
        $(col).removeClass('moving');
      });
    };
  
    [].forEach.call(cols_, function (col) {
      col.setAttribute('draggable', 'true');  // Enable columns to be draggable.
      col.addEventListener('dragstart', this.handleDragStart, false);
      col.addEventListener('dragenter', this.handleDragEnter, false);
      col.addEventListener('dragover', this.handleDragOver, false);
      col.addEventListener('dragleave', this.handleDragLeave, false);
      col.addEventListener('drop', this.handleDrop, false);
      col.addEventListener('dragend', this.handleDragEnd, false);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.column {
    height: 150px;
    width: 150px;
    float: left;
    border: 2px solid #666666;
    background-color: #ccc;
    margin-right: 5px;
    border-radius: 10px;
    box-shadow: inset 0 0 3px #000;
    text-align: center;
    cursor: move;
    margin-bottom: 30px;
  }
  .column header {
    color: #fff;
    text-shadow: #000 0 1px;
    box-shadow: 5px;
    padding: 5px;
    background: linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .column {
   transition: transform 0.2s ease-out;
  }
  .column.over {
    border: 2px dashed #000;
  }
  .column.moving {
    opacity: 0.25;
    transform: scale(0.8);
  }
  .column .count {
    padding-top: 15px;
    font-weight: bold;
    text-shadow: #fff 0 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
   
  &lt;div class="cols"&gt;
    &lt;div class="column"&gt;
      &lt;header&gt;C&lt;/header&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;header&gt;B&lt;/header&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;header&gt;A&lt;/header&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>So it looks like the vendors are preparing for multiple item drag and drop, but there seems no be no default. Please correct me if i'am wrong.</p>
  
  <p>I read these articles to better understand dnd </p>
  
  <ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop">https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop</a> </li>
  <li><a href="http://html5doctor.com/native-drag-and-drop/">http://html5doctor.com/native-drag-and-drop/</a></li>
  </ul>
  
  <p>Further readings:</p>
  
  <ul>
  <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-datatransferitemlist-interface">Definition of <code>DataTransferItemList</code></a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">MDN's take on the DataTransfer interface</a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items#Multiple_Drop_Example">MDN's non standard approach of multiple drag and drop</a></li>
  </ul>