Html5 drag and drop unicode chessboard - html

Question

I am trying to do html5 dragndrop on my html5/css chessboard using unicode pieces but have a problem at the moment with it.
On dragging & dropping the whole 'li' element seems to move & on drop this disrupts the board.
This can be seen on the chess WordPress site at:
http://www.buryknightschess.org.uk/play-chess/
(As can be seen I asked for help with this on SitePoint Forums but haven't had a reply to help yet from there).
Possibly I somehow need just to make the unicode chess pieces draggable & not the whole chess square (<li></li>).
I shall keep trying to fix this but meanwhile I would greatly appreciate any advice to help with this html5 dragndrop issue. I look forward to helpful replies, many thanks

Answer 1

The reason the <li/> is being moved (thus rearranging the chess board) is because in your drop function is calling appendChild:
function drop(event) {
var element = event.dataTransfer.getData("Text");
// This changes the DOM
event.target.appendChild(document.getElementById(element));
event.stopPropagation();
return false;
}
Instead of moving that actual DOM node, the drop function should copy the innerHTML of the node that's being dragged. Here's how the new drop would look function:
function drop(event) {
var coordinate = event.dataTransfer.getData("Text");
var element = document.getElementById(coordinate);
event.target.innerHTML = element.innerHTML; // Moving piece to new cell
element.innerHTML = ""; // Clearing old cell
event.stopPropagation(); // Consider using `event.preventDefault` instead
return false;
}
Also, I'd consider using event.preventDfault instead of event.stopPropagation. This makes it possible to add new drop listeners to the board or one of its parents. For example you may want to add a drop listener to the document body to handle the case where a user tries to drag a piece off the board.
As general remark, have you considering using jQueryUI draggable and droppable libraries? You'd be able to support much richer drag/drop interactions such as snap-to-grid movement and delayed starts. Also, HTML5 drag-and-drop is typically used to allow users to drag files from their OS desktop onto the a web page. The way your using it is totally fine, it's just a little strange.