<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 affriad).</p>
<inputtype="radio"name="getDataType"value="type"id="type"/><labelfor="type">getData(e.dataTransfer.types[0]) based on detected content type</label>
</div>
</section>
<sectionid="drag">
<p><imgclass="photo"src="http://twivatar.org/rem"alt="Remy Sharp"style="float: left; margin: 3px 10px 10px 0;"/> My name is <aclass="fn n url"rel="me"href="http://remysharp.com">Remy Sharp</a> (<ahref="http://twitter.com/rem">@rem on Twitter</a> and <ahref="http://remysharp.com">my blog</a>). <spanclass="adr">I run a small <abbrclass="type"title="Work">business</abbr> in <ahref="http://www.flickr.com/places/United+Kingdom/England/Brighton"><spanclass="region">Brighton</span>, <abbrclass="country-name"title="United Kingdom">UK</abbr></a> called <aclass="org url"rel="me"href="http://leftlogic.com">Left Logic</a> and am running the <ahref="http://full-frontal.org">Full Frontal JavaScript Conference</a> and I specialise in <em>bespoke</em> front-end development & backend.</span></p>
</section>
<sectionid="drop">
<pclass="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
return false; // required by IE
}
function entities(s) {
var e = {
'"' : '"',
'&' : '&',
'<' : '<',
'>' : '>'
};
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.