Need to introduce an event before drag start, i.e. "onClick"

[csharptest]

Use case 1:
Developing an analysis/play board, I need to be able to record the piece that was clicked (aka select the piece for move). I would then need to use hover for styling the desired target, and again handle the event to move the piece.

Use case 2:
While developing a play board, I want to prevent the user from dragging a piece that is not allowed to be moved. This might be the wrong color, or may be a piece of the correct color with no valid moves.

Suggested signature:

    /** 
     * Signature: function(event: { piece: string, square: string, allowDrag: boolean }) => void
     */
    onClick: PropTypes.func,

Note:
allowDrag would default to true and if the function changes the value to false the drag operation would be cancelled. The event would also need to be fired when no piece was clicked to allow click-to-move behavior defined in use case 1 above.

[willb335]

Use case 1:

I'm looking at chess.com and they record the piece that was clicked and allow you to move the piece by clicking the target square. This is a very nice feature(I use it all of the time on my ipad playing on chess.com)and wasn't implemented in chessboard.js but I definitely want it for Chessboard.jsx.

I would then need to use hover for styling the desired target

So have some sort of unique hover styling over a desired target. This seems like a useful feature

Use case 2:
While developing a play board, I want to prevent the user from dragging a piece that is not allowed to be moved

Ok, so as of now draggable prop is for the entire board, that is not going to work for your use case.

[csharptest]

@willb335 Yes, I expect that draggable would apply to the whole board... this is a good thing and I need it too :)

Here though, I need to make the decision on a piece-by-piece basis at the moment dragging begins on a piece. Some pieces are valid to drag (white's move) and some pieces have valid moves (king has no adjacent empty squares) and so I want to prevent the drag operation from even starting.

[willb335]

Ok, got it. I'll use your suggested signature. Not sure when I'll start on this. I have some time this coming weekend

[willb335]

perhaps draggable prop could take a boolean for the whole board or an object for specific squares. draggable={ {'e5': false } }.

[willb335]

@csharptest
a1ee12f
I provided the onClick feature and updated Demo.js. Take a look at 'With Move Validation.'

[furrykef]

I was looking for this feature for use case 2.

I can't find the Demo.js being referred to here. Neither the src/Demo.js in this repository nor the one at https://codesandbox.io/s/lp32ojqzqm?from-embed seems to have anything relevant.

Does it provide a way to reject picking up the piece? I'm thinking the handler should return true if the piece is allowed to be picked up and false if not.

[willb335]

@furrykef
After looking at this again I realized I misunderstood use case 2 from @csharptest.

see #28

I used: Signature: function( { piece: string, sourceSquare: string } ) => bool

Please check out Demo.js again with the 'Conditionally Disable Drag' demo

Please let me know if this is a solution for you

[furrykef]

As I said before, I don't know where the Demo.js you refer to is.

[willb335]

Ok, if you fetch the allow-drag branch I committed in #28 and then run npm run start that will load the Demo.js component(usually called App.js, it's the root component)

If you want to see the implementation code for allowDrag then go to https://github.com/willb335/chessboardjsx/blob/allow-drag/src/integrations/AllowDrag.js

[furrykef]

That looks fine to me. Thanks.

One quibble: I notice the mouse cursor changes to a hand icon when you mouseover a piece, whether that piece is draggable or not. I don't think it should do that when you mouseover a non-draggable piece. It's not remotely an urgent matter for me, though.

[willb335]

Ok, I'll look into fixing that

[willb335]

cursor: 'not-allowed' implemented for non-draggable pieces and will be available for 2.0.1