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

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

Paul_Wilkins
—
2011-09-10T23:34:29Z —
#3

richardpd said:

I would like a helpful reply on how to enable drag & drop to work properly on this page/chessboard

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?

richardpd
—
2011-09-10T21:34:53Z —
#4

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

Stomme_poes
—
2011-09-10T20:18:43Z —
#5

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

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

centered_effect
—
2011-09-11T15:00:39Z —
#8

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

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

richardpd
—
2011-09-12T06:41:59Z —
#10

Hi centered effectMany 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

centered_effect
—
2011-09-12T03:07:27Z —
#11

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.

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