Html5 Drag and drop

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 &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

centered effect

Thanks for the link-I have seen it & I have spent hours trying to apply html5 dragndrop API to my chessboard but everything I have done has been unsuccessful. I think I now have a fair understanding of this dnd API but practically I have not made it work yet-possibly due to my pants javascript skills! One day I will crack this & then I will put up my solution as a tutorial online for others to learn from! Meanwhile if anyone wants to give me a helping hand with this I would sure be grateful!
Best wishes

Currently it looks nothing like a chessboard, but is instead an unordered list of items , with each item being an unfound image.

Can you link us to a test page that will allow us to see the page in the same way that you are seeing it?

This is my code-not taken from any demo. It is my code to make a GUI (webGui?) html5 drag and drop chessboard webpage.
It does not leave images on the same window. After dragging and dropping a piece(the pawn on A2) the browser window closes & opens a new window showing only the file image.
I wanted to put this in HTML5 topic but could not see one so I posted it here. By all means move it into JavaScript topic but I would like a helpful reply on how to enable drag & drop to work properly on this page/chessboard…Thank you

This looks like it was taken from a demo.

So the demo is leaving the images on the same window?

I’m suggesting a mod move this over to Javascript, since the drag and drop API is pretty much just Javascript (it’s also not finished, so it’s still being built).

Np. I am sure you also checked this out as well if you want to stay native:
HTML5 Demo: Drag and drop

Hi centered effect

Thanks for your helpful reply.
jQueryUI dnd is certainly an option.
I just wanted to stay ‘native’ & use the HTML5 DND API on this html5 board.
(Html5 DnD API does not seem to have a great reputation though from my internet research & so far it has eluded me).
Preferrentially I would like to get the HTML5 DnD working but I will look at jQueryUI API-many thanks

Maybe not helpful but I see you are using Jquery UI, why not use the draggable/droppable functions:

jQuery UI - Draggable Demos & Documentation
jQuery UI - Droppable Demos & Documentation

Paul

My code is an html5/css chessboard (using div/ul & not a table based one).

It has proven quite hard to display this online as my websites are WordPress & it is hard to show html pages in WP pages & posts.

However I have done a special edition for you which can be seen at BuryKnightsJuniorChessClub wordpress website (I am the webmaster for this site).See:
Play Chess | Bury Knights Junior Chess Club

I hope you (or anyone else) can help me with html5 drag & drop on this board which I have spent many hours struggling with & no success yet. I look forward to helpful replies, thanks

Hi centered effect
Many thanks for your further help with this dragndrop. I like your code.
I have looked quickly at it and now will take more time to study it, learn from it and apply it myself.
If I get any issues with it I will let you know!
You have done a great job with this for me & I appreciate that.
Best wishes

I would reduce the page to the basics and then implement the drag and drop functionality, then bring in the additional code for the script.

Like this basic setup using jQuery UI’s draggable/droppable modules:


<!doctype html>
<html>
	<head>
		<title></title>
			<style>
				*{margin:0;padding:0;}
				#board{float:left;width:350px;height:350px;position:relative;margin:5px;padding:7px 0 0 7px;}
				#board ul{height:40px;width:340px;position:relative;background-color:rgba(255,255,255,0.5);color:#222;font-size:14pt;margin:0;}
				#board ul li{display:inline;float:left;position:relative;height:38px;width:38px;border:1px solid silver;}
				.piece { cursor: move; margin-left: 10px; }
			</style>		
	</head>
	<body>
		<div id="board">
			<ul class="row">
				<li id="A8"><span class="piece">&#9820;</span></li>
				<li id="B8"><span class="piece">&#9822;</span></li>
				<li id="C8"><span class="piece">&#9821;</span></li>
				<li id="D8"><span class="piece">&#9819;</span></li>
				<li id="E8"><span class="piece">&#9818;</span></li>
				<li id="F8"><span class="piece">&#9821;</span></li>
				<li id="G8"><span class="piece">&#9822;</span></li>
				<li id="H8"><span class="piece">&#9820;</span></li>
			</ul>

			<ul class="row">
				<li id="A7"><span class="piece">&#9817;</span></li>
				<li id="B7"><span class="piece">&#9817;</span></li>
				<li id="C7"><span class="piece">&#9817;</span></li>
				<li id="D7"><span class="piece">&#9817;</span></li>
				<li id="E7"><span class="piece">&#9817;</span></li>
				<li id="F7"><span class="piece">&#9817;</span></li>
				<li id="G7"><span class="piece">&#9817;</span></li>
				<li id="H7"><span class="piece">&#9817;</span></li>
			</ul>

			<ul class="row">
				<li id="A6"></li>
				<li id="B6"></li>
				<li id="C6"></li>
				<li id="D6"></li>
				<li id="E6"></li>
				<li id="F6"></li>
				<li id="G6"></li>
				<li id="H6"></li>
			</ul>

			<ul class="row">
				<li id="A5"></li>
				<li id="B5"></li>
				<li id="C5"></li>
				<li id="D5"></li>
				<li id="E5"></li>
				<li id="F5"></li>
				<li id="G5"></li>
				<li id="H5"></li>
			</ul>

			<ul class="row">
				<li id="A4"></li>
				<li id="B4"></li>
				<li id="C4"></li>
				<li id="D4"></li>
				<li id="E4"></li>
				<li id="F4"></li>
				<li id="G4"></li>
				<li id="H4"></li>
			</ul>

			<ul class="row">
				<li id="A3"></li>
				<li id="B3"></li>
				<li id="C3"></li>
				<li id="D3"></li>
				<li id="E3"></li>
				<li id="F3"></li>
				<li id="G3"></li>
				<li id="H3"></li>
			</ul>

			<ul class="row">
				<li id="A2"><span class="piece">&#9817;</span></li>
				<li id="B2"><span class="piece">&#9817;</span></li>
				<li id="C2"><span class="piece">&#9817;</span></li>
				<li id="D2"><span class="piece">&#9817;</span></li>
				<li id="E2"><span class="piece">&#9817;</span></li>
				<li id="F2"><span class="piece">&#9817;</span></li>
				<li id="G2"><span class="piece">&#9817;</span></li>
				<li id="H2"><span class="piece">&#9817;</span></li>
			</ul>

			<ul class="row">
				<li id="A1"><span class="piece">&#9814;</span></li>
				<li id="B1"><span class="piece">&#9816;</span></li>
				<li id="C1"><span class="piece">&#9815;</span></li>
				<li id="D1"><span class="piece">&#9813;</span></li>
				<li id="E1"><span class="piece">&#9812;</span></li>
				<li id="F1"><span class="piece">&#9815;</span></li>
				<li id="G1"><span class="piece">&#9816;</span></li>
				<li id="H1"><span class="piece">&#9814;</span></li>
			</ul>
		</div>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script>
			$('.row li .piece').each(function(){
				$(this).draggable();
			});
			$('.row li').each(function() {
				if($(this).text() === '') {
					$(this).droppable();
				}
			});
		</script>
	</body>
</html>

I have looked at this again today to try and add html5 drag & drop to the board pieces. Unfortunately dragging & dropping is causing errors on the board.
Please look at this online at http://www.buryknightschess.org.uk/play-chess/
I am most grateful for further help & advice from anyone but especially those with experience of html5 drag & drop.
I look forward to helpful replies-many thanks