Find file
Fetching contributors…
Cannot retrieve contributors at this time
127 lines (106 sloc) 4.22 KB
<title>Simple Drag and Drop</title>
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;
<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>
<input type="radio" name="getDataType" value="text" id="text" checked="checked" /> <label for="text">getData('Text')</label>
<input type="radio" name="getDataType" value="type" id="type" /> <label for="type">getData(e.dataTransfer.types[0]) based on detected content type</label>
<section id="drag">
<p><img class="photo" src="" alt="Remy Sharp" style="float: left; margin: 3px 10px 10px 0;" /> My name is <a class="fn n url" rel="me" href="">Remy Sharp</a> (<a href="">@rem on Twitter</a> and <a href="">my blog</a>). <span class="adr">I run a small <abbr class="type" title="Work">business</abbr> in <a href=""><span class="region">Brighton</span>, <abbr class="country-name" title="United Kingdom">UK</abbr></a> called <a class="org url" rel="me" href="">Left Logic</a> and am running the <a href="">Full Frontal JavaScript Conference</a> and I specialise in <em>bespoke</em> front-end development &amp; backend.</span></p>
<section id="drop">
<p class="info">Drop here for info about the dragged item</p>
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>';
[], 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 {
return false;