Drag drop a piece

[Henk]

I use HTML5 drag drop on my website for moving a piece. But piece is also displayed at start square when you drag it. That is not normal compared to other chess websites.

See also http://www.w3schools.com/html/tryit.asp ... raganddrop
and for instance http://www.shredderchess.com/play-chess-online.html

Are there any simple solutions ? I don't have much javascript knowledge.

[op12no2]

What's your website URL?

NB: I recommend using:-

http://chessboardjs.com/

All the nitty-gritty drag/drop stuff is handled for you then.

[hgm]

I suppose that the handler of the mouse button-press event (or some 'start dragging' event) would have to remove the image of the piece from the original square. I never got further than writing the 'moves at a glance' boards for the WinBoard rules pages in JavaScript. (E.g. http://hgm.nubati.net/rules/Spartan.html.) For that I have to alter the image in the squares the clicked piece can move to in the button-press handler (and change them back on button release). I don't know if changing the image in the clicked square itself already on the button press would interfere with grabbing the piece for dragging.

[Henk]

What's your website URL?

NB: I recommend using:-

http://chessboardjs.com/

All the nitty-gritty drag/drop stuff is handled for you then.

[Website only runs on my local machine.]

So what you say is there is not a simple solution for dragging dropping a chess piece.

[Henk]

I suppose that the handler of the mouse button-press event (or some 'start dragging' event) would have to remove the image of the piece from the original square. I never got further than writing the 'moves at a glance' boards for the WinBoard rules pages in JavaScript. (E.g. http://hgm.nubati.net/rules/Spartan.html.) For that I have to alter the image in the squares the clicked piece can move to in the button-press handler (and change them back on button release). I don't know if changing the image in the clicked square itself already on the button press would interfere with grabbing the piece for dragging.

Yesterday I made it invisible but then you drag an invisible image. I think if I remove the element it won't drag for it won't be there anymore but I might be wrong.

Dragging in this case should be nothing more then changing it's start location while dragging.

[hgm]

I was already afraid that would happen. I guess you would have to clear it not at the button press,but at some later event that signals dragging has started (implying the old image is already grabbed).

[op12no2]

So what you say is there is not a simple solution for dragging dropping a chess piece.

Not at all, just that unless you are writing native JS for educational purposes, there are some very nice chess JS libraries out there. Or compromise at using jQuery - it's an abstraction over native JS making D&D etc easier while being domain-generic.

[hgm]

The chessboard.js at the mentioned link seems to explicitly disable the browser's standard dragging by providing a dummy routine 'stopDefault' for it, and then supplies its own routine 'beginDraggingPiece' and assigns it to mousedown events (via mousedownSquare).

I guess using the browser's default dragging is too simplistic, as you could grab any image (also pieces of the side not on move). So you first want to check if dragging the image is allowed.

I guess a reasonably simple solution would be to set a global variable on mousedown that remembers the square that was down-clicked and sets a flag to indicate the piece can be dragged. The mousemove handler could then check this flag, and when it is set clear it, and clear the square. The first mousemove event should come only after the browser has already grabbed the image. When the mousedown handler decided the piece should not be dragged you refrain from setting the flag, so that later dragging would leave the image in the square.

[op12no2]

NB: A library that can be used effectively with chessboard.js is chess.js:-

https://github.com/jhlywa/chess.js

chessboard.js doesn't know about legal moves, chess.js does.

You can then very easily check a legal move has been dragged/dropped and in fact the code to play a game is very small (UI-wise):-

http://op12no2.me/toys/lozza/play.js

which looks like this:-

http://op12no2.me/toys/lozza/play.htm