159 lines
3.4 KiB
HTML
159 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
|
<title>HTML5 Drag and drop demonstration</title>
|
|
<style type="text/css">
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
margin: 50px;
|
|
font-family: helvetica, arial;
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
/* padding: 10px;*/
|
|
}
|
|
|
|
li a {
|
|
text-decoration: none;
|
|
color: #000;
|
|
margin: 10px;
|
|
width: 150px;
|
|
border: 3px dashed #999;
|
|
background: #eee;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
-moz-user-select:none;
|
|
/* -webkit-user-drag: element;*/
|
|
-khtml-user-drag: element;
|
|
display: block;
|
|
}
|
|
|
|
*:-khtml-drag {
|
|
background-color: rgba(238,238,238, 0.5);
|
|
}
|
|
|
|
a:hover:after {
|
|
content: ' (drag me)';
|
|
}
|
|
|
|
li.over {
|
|
border-color: #333;
|
|
background: #ccc;
|
|
}
|
|
|
|
#bin {
|
|
background: url(images/bin.jpg) top right no-repeat;
|
|
height: 250px;
|
|
width: 166px;
|
|
float: right;
|
|
border: 5px solid #000;
|
|
position: relative;
|
|
}
|
|
|
|
#bin.over {
|
|
background: url(images/bin.jpg) top left no-repeat;
|
|
}
|
|
|
|
#bin p {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 20px;
|
|
width: 166px;
|
|
font-size: 32px;
|
|
color: #fff;
|
|
text-shadow: #000 2px 2px 2px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="bin"></div>
|
|
<ul>
|
|
<li><a id="one" href="#">one</a></li>
|
|
<li><a href="#" id="two">two</a></li>
|
|
<li><a href="#" id="three">three</a></li>
|
|
<li><a href="#" id="four">four</a></li>
|
|
<li><a href="#" id="five">five</a></li>
|
|
</ul>
|
|
<script src="h5utils.js"></script>
|
|
<script>
|
|
|
|
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
|
|
var yum = document.createElement('p');
|
|
var msie = /*@cc_on!@*/0;
|
|
yum.style.opacity = 1;
|
|
|
|
var links = document.querySelectorAll('li > a'), el = null;
|
|
for (var i = 0; i < links.length; i++) {
|
|
el = links[i];
|
|
|
|
// even required? Spec says yes, browsers say no.
|
|
el.setAttribute('draggable', 'true');
|
|
|
|
addEvent(el, 'dragstart', function (e) {
|
|
e.dataTransfer.setData('Text', this.id); // set *something* required otherwise doesn't work
|
|
});
|
|
}
|
|
|
|
var bin = document.querySelector('#bin');
|
|
|
|
addEvent(bin, 'dragover', function (e) {
|
|
if (e.preventDefault) e.preventDefault(); // allows us to drop
|
|
this.className = 'over';
|
|
return false;
|
|
});
|
|
|
|
addEvent(bin, 'dragleave', function () {
|
|
this.className = '';
|
|
});
|
|
|
|
addEvent(bin, 'drop', function (e) {
|
|
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
|
|
|
|
var el = document.getElementById(e.dataTransfer.getData('Text'));
|
|
|
|
el.parentNode.removeChild(el);
|
|
|
|
// stupid nom text + fade effect
|
|
bin.className = '';
|
|
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
|
|
|
|
var y = yum.cloneNode(true);
|
|
bin.appendChild(y);
|
|
|
|
setTimeout(function () {
|
|
var t = setInterval(function () {
|
|
if (y.style.opacity <= 0) {
|
|
if (msie) { // don't bother with the animation
|
|
y.style.display = 'none';
|
|
}
|
|
clearInterval(t);
|
|
} else {
|
|
y.style.opacity -= 0.1;
|
|
}
|
|
}, 50);
|
|
}, 250);
|
|
|
|
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>
|