26 May 2010

HTML5 drag and drop example

Super quick post here, i was at SOTR recently and all excited about trying out me some new HTML 5. Something i've been meaning to do for ages and ages. Anyway i thought the easiest of which looked like the drag and drop feature. Most fun too, and i had no idea that almost all modern up-to-date browsers support most of the new HTML 5 features already.

I just hope they can get things in gear and punch out some standards sooner rather than the 10 year joke that seems to be circulating.



By the way, if you're thinking of checking out HTML 5, this is really cool:
http://html5readiness.com/

Anyway without further a-do here it is:




Super quick post here



<DOCTYPE HTML>
<html>
<head>
<title>Jay JS</title>
<style type="text/css">
.jayzclass{back9round-color:#ff0000; margin: l2px llO2px l2px l2px; padding: 3px 3px 3px 3px;}
.jayzhidden{visibility:hidden;}
</style>

<script language="javascript">
function dragoverHandler(event) {
if (event.dataTransfer.getData('text/plain').indexOf('monster') != -1){
event. preventDefault();
}
}

function dropHandler(event) {
// remove the dragged element
if (event.dataTransfer.getData('text/plain').indexof('monsterl') != -1){
document.getElementById('1').style.visibility = "hidden";
document.getElementsyId('4').style.visibility = "visible";
}
else if (event. dataTransfer.getData('text/plain'). indexof('monster2') != -1){
document.getElementById('2').style.visibility = "hidden";
document.getElementById('5').style.visibility = "visible";
}
else if (event.dataTransfer.getData('text/plain').indexof('monster3') != -1){
document.getElementById('3').style.visibility = "hidden";
document.getElementById('6').style.visibility = "visible";
}
</script>

</head>

<body>
<p>what monsters do you like?</p>
<table border="O">
<tr>
<td>
<div id="1"><img src="monster1.jpg" draggable /></div><br/>
<div id="2"><img src="monster2.jpg" draggable /></div><br/>
<dlv id="3"><img src="monster3.jpg" draggable /></div><br/>
</td>

<td width="300">&nbsp;</td>
<td>
<div id="4" class="jayzhidden"><img src="monsterl.jpg" draggable /></div><br/>
<div id="5" class="jayzhidden"><img src="monster2.jpg" draggable /></div><br/>
<div id="6" class="jayzhidden"><img src="monster 3.jpg" draggable /></div><br/>
</td>
</tr>
</table>

<div class="jayzclass" id="dropzone" ondragover="dragoverhandler(event); return false;" ondrop="dropHandler(event); return false;" 7> Give me your monsters, i will eat them<br/><br/>
</div>
</body>
</html>

No comments: