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.

Code:
<!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 &copy; 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