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.