Html5 dragndrop chessboard update

A month since my last post about my new html5 drag and drop chessboard!
The chessboard still does not have satisfactory html5 drag and drop.
I have researched for help with this on GOOGLE search of course and left posts for help on several programming type websites (eg Sitepoint/StackOverflow & Twitter tweets!)-yet so far I have not solved the problem.

I will solve this even if it takes a long time! Meanwhile if any can help me with it I would be most grateful!


Just after posting this I have had a really helpful reply from Xavi on StackOverflow:

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.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); = 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.


Thanks Xavi-
I am just going to edit my html5 chessboard code….& will post back my results……


I have enjoyed learning a little about html5 Canvas element as a side product of my research into Html5 DragnDrop.
Html5 really rocks! I look forward to using the canvas tags to make my drawing canvas and letting my artistic talent run wild! Hopefully I can even get Drag and Drop to work with it too!

HTML5 Canvas Demo:

Change the subject_BuddyPress forum

Today I tried to add a BuddyPress forum to my blog but that needs further work!
Hopeful it should be ready soon (the joys of technology!)…..

Be Sociable, Share!
This entry was posted in Blog, Html5, Technical and tagged , . Bookmark the permalink. | Permalink | 47754 Views

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge