Skip to content
Browse files

Fixing the drag and drop demos to work with Chrome

  • Loading branch information...
1 parent 40ef445 commit e9c484f79d1cacde12f9b502ef73f68c350131a1 @remy committed Mar 6, 2010
Showing with 30 additions and 49 deletions.
  1. +2 −2 demos.json
  2. +2 −1 demos/drag-anything.html
  3. +26 −46 { → demos}/drag.html
View
4 demos.json
@@ -72,15 +72,15 @@
"url": "drag",
"tags": "dnd",
"support": {
- "live": "ie firefox safari"
+ "live": "ie firefox safari chrome"
}
},
{
"desc": "drag anything",
"url": "drag-anything",
"tags": "dnd",
"support": {
- "live": "ie firefox safari"
+ "live": "ie firefox safari chrome"
}
},
{
View
3 demos/drag-anything.html
@@ -58,7 +58,7 @@
</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 @@
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
}
View
72 drag.html → demos/drag.html
@@ -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 @@
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 @@
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 @@
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,31 +74,32 @@
<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'];
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 = '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 @@
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 @@
});
</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>

0 comments on commit e9c484f

Please sign in to comment.
Something went wrong with that request. Please try again.