guert · January 25, 2012 20:38
diff --git a/Drag & Drop - Feed the Honey Badger b/Drag & Drop - Feed the Honey Badger
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset=utf-8>
 <meta name="viewport" content="width=620">
 <title>HTML5 Demo: Drag and drop</title>
 <link rel="stylesheet" href="css/html5demos.css">
 <script src="js/h5utils.js"></script>

 <style type="text/css">
 li {
  list-style: none;
 }

 li a {
  
  padding: 10px;
  display: block;
 }

 *[draggable=true] {
  -moz-user-select:none;
  -khtml-user-drag: element;
  cursor: move;
 }

 *:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
 }



 ul {
  margin-left: 200px;
  min-height: 300px;
 }



 #bin {
  background: url(images/bin.gif) top right no-repeat;
  height: 250px;
  width: 166px;
  float: left;
  border: none;
  position: relative;
  margin-top: 0;
 }

 #bin.over {
  background: url(images/bin.gif) top left no-repeat;
 }

 #bin p {
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: 166px;
  font-size: 32px;
  color: #000;
  text-shadow: #000 2px 2px 2px;
 }
 </style>

 </head>

 <body>

 <article>
  <p>Drag the items over the honey badger, and drop them to feed him.</p>
  <div id="bin"></div>
  <ul>
    <li><a id="one" href="#"><img src="images/bees.gif" style="border:none;" alt="bees" /></a></li>
    <li><a href="#" id="two"><img src="images/mouse.gif" style="border:none;" alt="mouse" /></a></li>
    <li><a href="#" id="three"><img src="images/cobra.gif" style="border:none;" alt="cobra" /></a></li>
  </ul>
 </article>
 <script>

  var eat = ['gulp!', 'grunt!', 'burp!', 'chomp!'];
  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];
  
    el.setAttribute('draggable', 'true');
  
    addEvent(el, 'dragstart', function (e) {
      e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
      e.dataTransfer.setData('Text', this.id); // 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';
    e.dataTransfer.dropEffect = 'copy';
    return false;
  });

  // to get IE to work
  addEvent(bin, 'dragenter', function (e) {
    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 src="js/prettify.packed.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=620">
	<title>HTML5 Demo: Drag and drop</title>
	<link rel="stylesheet" href="css/html5demos.css">
	<script src="js/h5utils.js"></script>

	<style type="text/css">
	li {
	list-style: none;
	}

	li a {

	padding: 10px;
	display: block;
	}

	*[draggable=true] {
	-moz-user-select:none;
	-khtml-user-drag: element;
	cursor: move;
	}

	*:-khtml-drag {
	background-color: rgba(238,238,238, 0.5);
	}



	ul {
	margin-left: 200px;
	min-height: 300px;
	}



	#bin {
	background: url(images/bin.gif) top right no-repeat;
	height: 250px;
	width: 166px;
	float: left;
	border: none;
	position: relative;
	margin-top: 0;
	}

	#bin.over {
	background: url(images/bin.gif) top left no-repeat;
	}

	#bin p {
	font-weight: bold;
	text-align: center;
	position: absolute;
	bottom: 20px;
	width: 166px;
	font-size: 32px;
	color: #000;
	text-shadow: #000 2px 2px 2px;
	}
	</style>

	</head>

	<body>

	<article>
	<p>Drag the items over the honey badger, and drop them to feed him.</p>
	<div id="bin"></div>
	<ul>
	<li><a id="one" href="#"><img src="images/bees.gif" style="border:none;" alt="bees" /></a></li>
	<li><a href="#" id="two"><img src="images/mouse.gif" style="border:none;" alt="mouse" /></a></li>
	<li><a href="#" id="three"><img src="images/cobra.gif" style="border:none;" alt="cobra" /></a></li>
	</ul>
	</article>
	<script>

	var eat = ['gulp!', 'grunt!', 'burp!', 'chomp!'];
	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];

	el.setAttribute('draggable', 'true');

	addEvent(el, 'dragstart', function (e) {
	e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
	e.dataTransfer.setData('Text', this.id); // 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';
	e.dataTransfer.dropEffect = 'copy';
	return false;
	});

	// to get IE to work
	addEvent(bin, 'dragenter', function (e) {
	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 src="js/prettify.packed.js"></script>
	</body>
	</html>
No results found