HTML5 Multimedia Development Cookbook

Front Cover
Packt Publishing Ltd, May 19, 2011 - Computers - 271 pages
Written in a cookbook style, this book offers solutions using a recipe based approach. Each recipe contains step-by-step instructions followed by an analysis of what was done in each task and other useful information. Web developers who value the need to stay ahead of the game. This cookbook will give you the edge with practical recipes for wielding this new technology immediately.
 

What people are saying - Write a review

User Review - Flag as inappropriate

<!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">
#boxA, #boxB, #boxC {
float:left; width:200px; height:200px; padding:10px; margin:10px;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }
#boxC { background-color: yellow; }
#drag, #drag2, #drag3 {
width:50px; height:50px; padding:5px; margin:5px;
-moz-user-select:none;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
#drag3 { background-color: purple; border:3px brown solid;}
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.effectAllowed='move';
//ev.dataTransfer.dropEffect='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
}
function dragEnd(ev) {
ev.dataTransfer.clearData("Text");
return true
}
function dragEnter(ev) {
var idelt = ev.dataTransfer.getData("Text");
return true;
}
function dragOver(ev) {
var idelt = ev.dataTransfer.getData("Text");
var id = ev.target.getAttribute('id');
return false;
if( (id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2'))
return false;
else if( id =='boxC' && idelt == 'drag3')
return false;
else
return true;
}
function dragDrop(ev) {
console.log('drop');
var idelt = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(idelt));
ev.stopPropagation();
return false; // return false so the event will not be propagated to the browser
}
</script>
</head>
<body>
<div id="boxA"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
<div id="drag" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
<div id="drag2" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
<div id="drag3" draggable="true"
ondragstart="return dragStart(event)"
ondragend="return dragEnd(event)">drag me</div>
</div>
<div id="boxB"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
<div id="boxC"
ondragenter="return dragEnter(event)"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
<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>
 

Other editions - View all

Common terms and phrases

About the author (2011)

Since 1995, Boston-area web developer Dale Cruse has been publishing websites for high-profile clients ranging from the U.S. Army to Bloomingdale's. He has been a guest lecturer at the Art Institute of New England & is currently pursuing speaking opportunities. Contact him at http: //dalejcruse.com. He is also the author of the Champagne blog Drinks Are On Me at http: //drinksareonme.net.

Bibliographic information