mirror of
https://github.com/Erreur32/html5demos.git
synced 2024-09-30 04:11:30 +02:00
194 lines
5.2 KiB
HTML
194 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset=utf-8 />
|
|
<title>HTML5 Demo: Simple Drag and Drop</title>
|
|
<style>
|
|
body {
|
|
font: normal 16px/20px Helvetica, sans-serif;
|
|
background: rgb(237, 237, 236);
|
|
margin: 0;
|
|
margin-top: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
section, header, footer {
|
|
display: block;
|
|
}
|
|
|
|
#wrapper {
|
|
width: 600px;
|
|
margin: 0 auto;
|
|
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
|
-moz-border-radius: 10px;
|
|
-webkit-border-radius: 10px;
|
|
border-top: 1px solid #fff;
|
|
padding-bottom: 76px;
|
|
}
|
|
|
|
h1 {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 100%;
|
|
font-style: italic;
|
|
}
|
|
|
|
header,
|
|
article > *,
|
|
footer > * {
|
|
margin: 20px;
|
|
}
|
|
|
|
input {
|
|
font-size: 16px;
|
|
padding: 3px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
footer > * {
|
|
margin: 20px;
|
|
color: #999;
|
|
}
|
|
|
|
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>
|
|
<script src="h5utils.js"></script>
|
|
</head>
|
|
<body>
|
|
<section id="wrapper">
|
|
<header>
|
|
<h1>Simple Drag and Drop</h1>
|
|
</header>
|
|
<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>
|
|
<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>
|
|
<footer><a href="/">HTML5 demo</a></footer>
|
|
</section>
|
|
<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
|
|
if (drop.innerHTML.match(/Drop here/i)) {
|
|
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 = entities(e.dataTransfer.getData(e.dataTransfer.types[0]) + ' (content-type: ' + e.dataTransfer.types[0] + ')');
|
|
} 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>
|
|
<script>
|
|
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
|
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
|
</script>
|
|
<script>
|
|
try {
|
|
var pageTracker = _gat._getTracker("UA-1656750-18");
|
|
pageTracker._trackPageview();
|
|
} catch(err) {}</script>
|
|
</body>
|
|
</html> |