rhdwponlinetwist

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!

STOP PRESS!!:

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

 

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

End STOP PRESS…

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:
see: http://www.ibm.com/developerworks/web/library/wa-html5canvas/

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!)…..