126 lines
4.1 KiB
HTML
126 lines
4.1 KiB
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 affriad).</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://twivatar.org/rem" 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 & 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
|
|
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.
|
|
|
|
// 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> |