Initial commit

tbithell · Mar 9, 2015 · b51b159 · b51b159
commit b51b159
Show file tree

Hide file tree

Showing 22 changed files with 3,402 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+The code accompanying a tutorial on how to extend the capabilities of HTML5 drag and drop — so it can handle multiple elements, and support keyboard interaction, for sighted and screen reader users.
+
+The tutorial can be found here: http://www.sitepoint.com/accessible-drag-drop
diff --git a/demo-1/demo1.css b/demo-1/demo1.css
@@ -0,0 +1,46 @@
+
+/* canvas styles */
+html, body
+{
+	font:normal normal normal 100%/1.4 tahoma, sans-serif;
+	background:#f9f9f9;
+	color:#000;
+}
+body
+{
+	font-size:0.8em;
+}
+
+/* draggable targets */
+[data-draggable="target"]
+{
+	float:left;
+	list-style-type:none;
+
+	width:42%;
+	height:7.5em;
+	overflow-y:auto;
+
+	margin:0 0.5em 0.5em 0;
+	padding:0.5em;
+
+	border:2px solid #888;
+	border-radius:0.2em;
+
+	background:#ddd;
+	color:#555;
+}
+
+/* draggable items */
+[data-draggable="item"]
+{
+	display:block;
+	list-style-type:none;
+
+	margin:0 0 2px 0;
+	padding:0.2em 0.4em;
+
+	border-radius:0.2em;
+
+	line-height:1.3;
+}
diff --git a/demo-1/demo1.html b/demo-1/demo1.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+
+	<meta charset="utf-8" />
+
+	<title>Demo 1: Basic Drag and Drop</title>
+
+	<link rel="stylesheet" href="demo1.css" type="text/css" />
+
+</head>
+<body>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 0</li>
+		<li data-draggable="item">Item 1</li>
+		<li data-draggable="item">Item 2</li>
+		<li data-draggable="item">Item 3</li>
+	</ol>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 4</li>
+		<li data-draggable="item">Item 5</li>
+	</ol>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 6</li>
+		<li data-draggable="item">Item 7</li>
+	</ol>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 8</li>
+	</ol>
+
+	<script src="demo1.js" type="text/javascript"></script>
+
+</body>
+</html>
diff --git a/demo-1/demo1.js b/demo-1/demo1.js
@@ -0,0 +1,79 @@
+(function()
+{
+
+	//exclude older browsers by the features we need them to support
+	//and legacy opera explicitly so we don't waste time on a dead browser
+	if
+	(
+		!document.querySelectorAll 
+		|| 
+		!('draggable' in document.createElement('span')) 
+		|| 
+		window.opera
+	) 
+	{ return; }
+
+	//get the collection of draggable items and add their draggable attribute
+	for(var 
+		items = document.querySelectorAll('[data-draggable="item"]'), 
+		len = items.length, 
+		i = 0; i < len; i ++)
+	{
+		items[i].setAttribute('draggable', 'true');
+	}
+
+
+
+	//variable for storing the dragging item reference 
+	//this will avoid the need to define any transfer data 
+	//which means that the elements don't need to have IDs 
+	var item = null;
+
+	//dragstart event to initiate mouse dragging
+	document.addEventListener('dragstart', function(e)
+	{
+		//set the item reference to this element
+		item = e.target;
+
+		//we don't need the transfer data, but we have to define something
+		//otherwise the drop action won't work at all in firefox
+		//most browsers support the proper mime-type syntax, eg. "text/plain"
+		//but we have to use this incorrect syntax for the benefit of IE10+
+		e.dataTransfer.setData('text', '');
+
+	}, false);
+
+	//dragover event to allow the drag by preventing its default
+	//ie. the default action of an element is not to allow dragging 
+	document.addEventListener('dragover', function(e)
+	{
+		if(item)
+		{
+			e.preventDefault();
+		}
+
+	}, false);	
+
+	//drop event to allow the element to be dropped into valid targets
+	document.addEventListener('drop', function(e)
+	{
+		//if this element is a drop target, move the item here 
+		//then prevent default to allow the action (same as dragover)
+		if(e.target.getAttribute('data-draggable') == 'target')
+		{
+			e.target.appendChild(item);
+
+			e.preventDefault();
+		}
+
+	}, false);
+
+	//dragend event to clean-up after drop or abort
+	//which fires whether or not the drop target was valid
+	document.addEventListener('dragend', function(e)
+	{
+		item = null;
+
+	}, false);
+
+})();	
diff --git a/demo-2/demo2a.css b/demo-2/demo2a.css
@@ -0,0 +1,61 @@
+
+/* canvas styles */
+html, body
+{
+	font:normal normal normal 100%/1.4 tahoma, sans-serif;
+	background:#f9f9f9;
+	color:#000;
+}
+body
+{
+	font-size:0.8em;
+}
+
+/* draggable targets */
+[data-draggable="target"]
+{
+	float:left;
+	list-style-type:none;
+
+	width:42%;
+	height:7.5em;
+	overflow-y:auto;
+
+	margin:0 0.5em 0.5em 0;
+	padding:0.5em;
+
+	border:2px solid #888;
+	border-radius:0.2em;
+
+	background:#ddd;
+	color:#555;
+}
+
+/* draggable items */
+[data-draggable="item"]
+{
+	display:block;
+	list-style-type:none;
+
+	margin:0 0 2px 0;
+	padding:0.2em 0.4em;
+
+	border-radius:0.2em;
+
+	line-height:1.3;
+}
+
+/* items focus state */
+[data-draggable="item"]:focus
+{
+	outline:none;
+
+	box-shadow:0 0 0 2px #68b, inset 0 0 0 1px #ddd;
+}
+
+/* items grabbed state */
+[data-draggable="item"][aria-grabbed="true"]
+{
+	background:#8ad;
+	color:#fff;
+}
diff --git a/demo-2/demo2a.html b/demo-2/demo2a.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+
+	<meta charset="utf-8" />
+
+	<title>Demo 2A: Mouse Selection</title>
+
+	<link rel="stylesheet" href="demo2a.css" type="text/css" />
+
+</head>
+<body>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 0</li>
+		<li data-draggable="item">Item 1</li>
+		<li data-draggable="item">Item 2</li>
+		<li data-draggable="item">Item 3</li>
+	</ol>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 4</li>
+		<li data-draggable="item">Item 5</li>
+	</ol>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 6</li>
+		<li data-draggable="item">Item 7</li>
+	</ol>
+
+	<ol data-draggable="target">
+		<li data-draggable="item">Item 8</li>
+	</ol>
+
+	<script src="demo2a.js" type="text/javascript"></script>
+
+</body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		The code accompanying a tutorial on how to extend the capabilities of HTML5 drag and drop — so it can handle multiple elements, and support keyboard interaction, for sighted and screen reader users.

		The tutorial can be found here: http://www.sitepoint.com/accessible-drag-drop