Hi
I want to add html5 drag and drop to a chessboard on my page but I cannot get it working. Everything I have tried ends up with the browser opening the image file in a new window-I cannot get the piece to drop on the board & stay!
I have spent ages trying & feel like I have gone round in circles & in desperation I am posting my code here & would be very grateful for helpful replies.
<!doctype html><!-- simplified doctype works for all previous versions of HTML as well -->
<!--html5 template from www.impressivewebs.com_modified by RPD-->
<!-- Paul Irish's technique for targeting IE, modified to only target IE6, applied to the html element instead of body -->
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"><![endif]-->
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
<!-- simplified character encoding -->
<meta charset="utf-8">
<title>RPD HTML5 Drag & Drop Chess</title>
<meta name="description" content="Easy HTML5 Template">
<meta name="author" content="">
<!-- Delete these two icon references once you've placed them in the root directory with these file names -->
<!-- favicon 16x16 -->
<link rel="shortcut icon" href="/favicon.ico">
<!-- apple touch icon 57x57 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Main style sheet. Change version number in query string to force styles refresh -->
<!-- Link element no longer needs type attribute -->
<link rel="stylesheet" href="css/screen.css?v=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="CSS/jquery.ui.base.css" />
<script type="text/javascript" src="lib/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-ui-1.8.10.custom.min.js" ></script>
<script type="text/javascript" src="js/chess.js"></script>
<script type="text/javascript">
$(function(){
new Game();
});
</script>
<!-- Modernizr for feature detection of CSS3 and HTML5; must be placed in the "head" -->
<!-- Script tag no longer needs type attribute -->
<script src="js/modernizr-1.6.min.js"></script>
<!-- Remove the script reference below if you're using Modernizr -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
//This starts the event
function dragStart(ev) {
ev.dataTransfer.effectAllowed='copy';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
return true;
}
//Prevents default but does not turn it off
function dragEnter(ev) {
event.preventDefault();
return true;
}
//Tunrs off the dragover default. This has to turned off.
function dragOver(ev) {
return false;
}
//This is when the object is dropped
function dragDrop(ev) {
var eleid = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(eleid));
ev.preventDefault();
}
</script>
</head>
<!-- RPD edit-Body- Either use <body> </body></body> OR-If possible, use the body as the container
Using body here in default -->
<!-- The "home" class is an example of a dynamic class created on the server for page-specific targeting
<body class="home"> -->
<body>
<!-- ******************************************************************** -->
<!-- The content below is for demonstration of some common HTML5 elements -->
<!-- More than likely you'll rip out everything except header/section/footer and start fresh -->
<!-- First header has an ID so you can give it individual styles, and target stuff inside it
<header id="hd1"> No way Hosay-not by default! Default is <header> tag (RPD edit) -->
<header>
<!-- "hgroup" is used to make two headings into one, to prevent a new document node from forming -->
<hgroup>
<h1>RPD HTML5 Chess drag & drop</h1>
<h2>tagline</h2>
</hgroup>
<!-- Main nav, styled by targeting "#hd1 nav"; you can have more than one nav element per page -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header><!--End header & or #hd1 header div id if used-->
<!-- This is the main "div" that wraps the content generically; don't use "section" for this -->
<div id="main">
<!-- The first of two "section" elements for demo purposes; optional class added for styling (hs1 = "home section 1") -->
<section class="hs1">
<!-- Each section should begin with a new h1 (not h2), and optionally a header -->
<!-- You can have more than one header/footer pair on a page -->
<header>
<h1>This is a Page Sub Title</h1>
</header>
<div id="wrapper">
<div id="board" ondragenter="return dragEnter(event)" ondragover=" return dragOver(event)" ondrop="return dragDrop(event)" >
<ul>
<div id="coord" class=" 5 dsq" ><span class="label">8</span></div>
<li id="A8"class="5 dsq" font-size="14pt"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/rook_black.png"></li>
<li id="B8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/knight_black.png"></li>
<li id="C8"class="5 dsq" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/bishop_black.png"></li>
<li id="D8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/queen_black.png"></li>
<li id="E8"class="5 dsq" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/king_black.png"></li>
<li id="F8"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/bishop_black.png"></li>
<li id="G8" class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/knight_black.png"></li>
<li id="H8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/rook_black.png"></li>
</ul>
<ul>
<div id="coord" class=" 5 dsq" ><span class="label">7</span></div>
<li id="A8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"></li>
<li id="B8"class="5 dsq" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"></li>
<li id="C8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"></li>
<li id="D8"class="5 dsq" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"> </li>
<li id="E8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"></li>
<li id="F8"class="5 dsq" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"> </li>
<li id="G8" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"></li>
<li id="H8" class="5 dsq" ><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_black.png"></li>
</ul>
<ul>
<div id="coord"class=" 5 dsq"><span class="label">6</span></div>
<li id="A7" class="5 dsq"></li>
<li id="B7"></li>
<li id="C7" class="5 dsq"></li>
<li id="D7"></li>
<li id="E7"class="5 dsq"></li>
<li id="F7" ></li>
<li id="G7"class="5 dsq"></li>
<li id="H7" ></li>
</ul>
<ul>
<div id="coord" class=" 5 dsq"><span class="label">5</span></div>
<li id="A6" ></li>
<li id="B6"class="5 dsq"></li>
<li id="C6"></li>
<li id="D6"class="5 dsq"></li>
<li id="E6"></li>
<li id="F6"class="5 dsq"></li>
<li id="G6"></li>
<li id="H6"class="5 dsq"></li>
</ul>
<ul>
<div id="coord" class=" 5 dsq"><span class="label">4</span></div>
<li id="A5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="B5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
<li id="C5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="D5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
<li id="E5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="F5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
<li id="G5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="H5"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
</ul>
<ul>
<div id="coord" class="5 dsq"><span class="label">3</span></div>
<li id="A4"ondragenter="return dragEnter(event)" ondragover=" return dragOver(event)" ondrop="return dragDrop(event)" ></li>
<li id="B4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="C4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
<li id="D4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="E4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
<li id="F4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
<li id="G4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"></li>
<li id="H4"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"class="5 dsq"></li>
</ul>
<ul>
<div id="coord" ondragstart="drag(this, event)"class=" 5 dsq"><span class="label">2</span></div>
<li id="A3"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);" class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_WEB_Programming_Design_etc/RPD_HTML5/Html5_Drag&Drop/RPD_Html5_dragndrop_chess/images/pawn_white55x55.png"draggable="" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)"></li>
<li id="B3"ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
<li id="C3"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
<li id="D3"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
<li id="E3"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
<li id="F3"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
<li id="G3"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
<li id="H3"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/pawn_white.png"></li>
</ul>
<ul>
<div id="coord" class=" 5 dsq"><span class="label">1</span></div>
<li id="A2"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/rook_white.png"></li>
<li id="B2"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/knight_white.png"></li>
<li id="C2"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/bishop_white.png"></li>
<li id="D2"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/queen_white.png"></li>
<li id="E2"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/king_white.png"></li>
<li id="F2"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/bishop_white.png"></li>
<li id="G2"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/knight_white.png"></li>
<li id="H2"class="5 dsq"><img src="file:///C:/RPD_Programming/RPD_Chess_programming/RPD_WebChess/RPD_rcChess/images/rook_white.png"></li>
</ul>
</div>
<div style="clear: both;"><!-- clear floats -->
<div id="coord_bottom_bar" class=" 5 dsq">
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">A</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">B</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">C</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">D</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">E</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">F</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">G</span></div>
<div id="coord_bottom_bar_no"> <span class="coordbot_dsq">H</span></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</section><!-- .hs1 -->
</div><!-- #main -->
<!-- The "aside" element could be a sidebar (outside an article or section)
Or it could reference other tangentially-related content within an article or section
Can be used with or without styling id/class eg <aside id="sidebar">
Default here is <aside></aside>-->
<aside>
<p>Sidebar content</p>
</aside>
<div style="clear: both;"><!-- clear floats -->
<!-- The main footer - RPD edit-This can have an ID for targeting, similar to the main header eg
<footer id="f1"> or can be 'plain' ie <footer></footer> as I have here-->
<footer>
<p>copyright © year</p>
</footer><!-- End footer or #f1 -->
<!-- Remote jQuery with local fallback; taken from HTML5 Boilerplate http://html5boilerplate.com -->
<!-- jQuery version might not be the latest; check jquery.com -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
<!-- Below is your script file, which has a basic JavaScript design pattern that you can optionally use -->
<!-- Keep this and plugin scripts at the bottom for faster page load; combining and minifying scripts is recommended -->
<script src="js/general.js"></script>
<!-- asynchronous analytics code by Mathias Bynens; change UA-XXXXX-X to your own code; http://mathiasbynens.be/notes/async-analytics-snippet -->
<!-- this can also be placed in the <head> if you want page views to be tracked quicker -->
<script>
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
</body>
</html>
Thanks