Mirror
/
html5demos
mirror of https://github.com/Erreur32/html5demos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixing the drag and drop demos to work with Chrome

This commit is contained in:
Remy Sharp 2010-03-06 10:15:41 +00:00
parent 40ef445651
commit e9c484f79d
3 changed files with 30 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demos.json
View File

@ -72,7 +72,7 @@
"url": "drag",
"tags": "dnd",
"support": {
"live": "ie firefox safari"
"live": "ie firefox safari chrome"
}
},
{
@ -80,7 +80,7 @@
"url": "drag-anything",
"tags": "dnd",
"support": {
"live": "ie firefox safari"
"live": "ie firefox safari chrome"
}
},
{

3
demos/drag-anything.html
View File

@ -58,7 +58,7 @@ 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 &amp; backend.</span></p>
<p><img class="photo" src="http://a3.twimg.com/profile_images/82806383/remysharp_normal.jpg" 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 &amp; backend.</span></p>
</section>
<section id="drop">
<p class="info">Drop here for info about the dragged item</p>
@ -68,6 +68,7 @@ label {
function cancel(e) {
if (e.preventDefault) e.preventDefault(); // required by FF + Safari
e.dataTransfer.dropEffect = 'copy'; // tells the browser what drop effect is allowed here
return false; // required by IE
}

72
drag.html → demos/drag.html
View File

@ -1,19 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8 />
<title>Drag and drop</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 50px;
font-family: helvetica, arial;
}
li {
list-style: none;
}
@ -39,10 +25,15 @@ li a {
background-color: rgba(238,238,238, 0.5);
}
a:hover:after {
li a:hover:after {
content: ' (drag me)';
}
ul {
margin-left: 200px;
min-height: 300px;
}
li.over {
border-color: #333;
background: #ccc;
@ -52,9 +43,10 @@ li.over {
background: url(images/bin.jpg) top right no-repeat;
height: 250px;
width: 166px;
float: right;
float: left;
border: 5px solid #000;
position: relative;
margin-top: 0;
}
#bin.over {
@ -71,11 +63,9 @@ li.over {
color: #fff;
text-shadow: #000 2px 2px 2px;
}
</style>
<script src="/js/h5utils.js"></script>
</head>
<body>
<article>
<p>Drag the list items over the dustbin, and drop them to have the bin eat the item</p>
<div id="bin"></div>
<ul>
<li><a id="one" href="#">one</a></li>
@ -84,7 +74,7 @@ li.over {
<li><a href="#" id="four">four</a></li>
<li><a href="#" id="five">five</a></li>
</ul>
<script src="h5utils.js"></script>
</article>
<script>
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
@ -92,23 +82,24 @@ li.over {
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 = 'move';
// e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
// });
// }
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;
});
@ -125,9 +116,9 @@ li.over {
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);
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
@ -153,14 +144,3 @@ li.over {
});
</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>