drag-anything.html

<title>Simple Drag and Drop</title>
<style>
article div {
  margin: 10px 0;
}

label {
  line-height: 32px;
}

/* for safari */
*[draggable=true] {
  -khtml-user-drag: element;
  cursor: move;
}

#drop {
  border: 3px dashed #ccc;
  padding: 10px;
  background: #fff;
  min-height: 200px;
/*  overflow-y: auto;*/
}

#drop .info {
  color: #999;
  text-align: center;
}

#drop ul {
  margin: 0;
  padding: 0;
}

#drop li {
  border-top: 2px solid #ccc;
  list-style: none;
  padding: 5px;
  font-size: 90%;
}

#drop li:first-child {
  border-top: 0;
}

</style>
    <article>
      <section>
        <p>Instructions: grab <em>anything</em> and drag it in to the drop zone below. I've included some text below, but you can drag urls, bookmarklets, files, <em>anything</em>.</p>
        <p>Check out the functionality in different browsers, because the same content appears differently when dropped. Something to watch out for in the future.</p>
        <p>Change the options below to see the difference between the default Text and sniffing for data (not supported in IE I'm afraid).</p>
        <p>Try also dropping a few files from your desktop on the drop zone and notice the content-type: text/uri-list</p>
        <div>
          <input type="radio" name="getDataType" value="text" id="text" checked="checked" /> <label for="text">getData('Text')</label>
        </div>
        <div>
          <input type="radio" name="getDataType" value="type" id="type" /> <label for="type">getData(e.dataTransfer.types[0]) based on detected content type</label>
        </div>
      </section>
      <section id="drag">
         <p><img class="photo" src="http://a3.twimg.com/profile_images/82806383/remysharp_normal.jpg" alt="Remy Sharp" style="float: left; margin: 3px 10px 10px 0;" /> My name is <a class="fn n url" rel="me" href="http://remysharp.com">Remy Sharp</a> (<a href="http://twitter.com/rem">@rem on Twitter</a> and <a href="http://remysharp.com">my blog</a>).  <span class="adr">I run a small <abbr class="type" title="Work">business</abbr> in <a href="http://www.flickr.com/places/United+Kingdom/England/Brighton"><span class="region">Brighton</span>, <abbr class="country-name" title="United Kingdom">UK</abbr></a> called <a class="org url" rel="me" href="http://leftlogic.com">Left Logic</a> and am running the <a href="http://full-frontal.org">Full Frontal JavaScript Conference</a> and I specialise in <em>bespoke</em> front-end development &amp; backend.</span></p>
      </section>
      <section id="drop">
        <p class="info">Drop here for info about the dragged item</p>
      </section>
    </article>
<script>

function cancel(e) {
  if (e.preventDefault) e.preventDefault(); // required by FF + Safari
  e.dataTransfer.dropEffect = 'copy'; // tells the browser what drop effect is allowed here
  return false; // required by IE
}

function entities(s) {
  var e = {
    '"' : '&quot;',
    '&' : '&amp;',
    '<' : '&lt;',
    '>' : '&gt;'
  };
  return s.replace(/["&<>]/g, function (m) {
    return e[m];
  });
}

var getDataType = document.querySelector('#text');
var drop = document.querySelector('#drop');

// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);

addEvent(drop, 'drop', function (e) {
  if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.

  // just rendering the text in to the list

  // clear out the original text
  drop.innerHTML = '<ul></ul>';
  
  var li = document.createElement('li');
  
  /** THIS IS THE MAGIC: we read from getData based on the content type - so it grabs the item matching that format **/
  if (getDataType.checked == false && e.dataTransfer.types) {
    li.innerHTML = '<ul>';
    [].forEach.call(e.dataTransfer.types, function (type) {
      li.innerHTML += '<li>' + entities(e.dataTransfer.getData(type) + ' (content-type: ' + type + ')') + '</li>';
    });
    li.innerHTML += '</ul>';
    
  } else {
    // ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
    li.innerHTML = e.dataTransfer.getData('Text');
  }
  
  var ul = drop.querySelector('ul');

  if (ul.firstChild) {
    ul.insertBefore(li, ul.firstChild);
  } else {
    ul.appendChild(li);
  }
  
  return false;
});
</script>