feature request: add ability to move pieces via clicking on start, then destination square

[aaronfi]

Really enjoy your work thus far.

I noticed the only way to move pieces currently is to click-drag them from their starting square to their destination square.

Adding an additional modality, in which you can click on a piece (thereby selecting it), then click on its destination square, would accommodate those users who for whatever reason naturally expect such behavior.

Just a small suggestion, which you've probably already thought of.

[oakmac]

I've been giving this some thought and I think it's an "either or" situation with making the pieces draggable like this. In other words: you'll have to specify which mode of operation you want on initialization and I'm not sure it's practical to allow both modes of operation at the same time.

You can accomplish this "clickMove" functionality now by disabling draggable and adding an onClick event on every square. Just add square highlights and track whether or not a piece was on the square they clicked.

I do think this should be built into the board API though; probably "clickMove" as a draggable mode.

[ivoaz]

+1 for this feature

[ghost]

http://BookmarkChess.com has this implemented. In considering switching over, this is one of the issues we will have to address. +1 for this feature.

[nadeemelahi]

I tweaked the code so that touch capable devices use the "clickMove" functionality. https://gist.github.com/nadeemelahi/10234719

[bik0z]

+1 for this feature.

[fhinson]

Hi @oakmac, Just wondering if there's any progress on this and/or you have an implementation idea.

Also — many thanks for the library! Chesscademy is still going strong and making use of chessboardjs extensively. We'd love to stay in touch regarding the library's development.

[oakmac]

Hi @fhinson - thanks for the kind words; glad you are using and enjoying the library :)

I haven't put much thought on this feature request beyond this initial thread.

[dsjoerg]

+1 and thanks for the excellent library

[khangcodt]

very graceful lib for chess graphic. But I think this feature is important, chess player used to play in this way. I tried myself to add this by link http://jsfiddle.net/M7hT8/1/ but failed until now (cause i have no time). Can you consider to add this feature?? :+1: or when I add this feature successfully, I'll contribute to you all :smile:

[txumai]

oakmac, fat groundwork is done, for events click & click, it make a listener of the full board o container scuares, and pop clicks, to combine with drag will be the mouseup event, take for managed the target, not currentTarget or $ (this) is handled , targent is the origin, the other where is the listener up on the board for example, valid elements is managed by controlling some class to ensure it is a scuare and if it is valid position, et., so with drag & drop everything and flags of second clic selection destination.

go! the highlight of selection and all the controls and movements have made

looking for some time because you like this and it and it is a shame, it is used in many places, hundreds pages.

Thank you for your javascript

[txumai]

click event better than mouseup because this also occurs on drop and as I told you only need to put a listener in buildBoardContainer () or initDom () as if (cfg.clicknclickMode ...

[justingolden21]

@oakmac Any progress on this now? Would you be able to merge a PR from someone above? Without this, playing on mobile is virtually impossible. In my opinion, this is the only core feature that chessboard.js is missing. Thanks in advance.

[hcgreier]

Hi out there!

I use chessboard.js to set up positions of chess problems and then save them as a .png or .jpg file (this is done by dom-to-image.js). So in my case I don't "play chessgames" moving pieces over the board. The problem on my (android) phone is that dragging down reloads the page and the position is gone. For my circumstances, I found a simple solution.

First, I placed the spare pieces both below the board. So one has just to drag pieces upwards not conflicting with the 'drag-down-reload'.

Second, you can simply use a checkbox to prevent the from scrolling using CSS. Something ike this:

$('input[type="checkbox"]').click(function (ev) {
  if ($(this).prop("checked") == true) {
    // Prevent body scroll - mobile mode
    $('html, body').css({
      'overflow': 'hidden',
      'height': '100%',
      'overscroll-behavior-y': 'contain'
    });
    // Change background in mobile mode
    $('.boardContainer').css('background', 'rgba(255,0,0,0.4)');
  }
  else {
    // Restore body scroll
    $('html, body').css({
      'overflow': 'auto',
      'height': 'auto',
      'overscroll-behavior-y': 'auto'
    });
    // Restore background
    $('.boardContainer').css('background', 'rgba(255,255,0,0.2)');
  }
});

I put the board inside a container to change it's background when you are in mobile mode. I also commented out the preventDefault() on line 1661 inside the 'touchmoveWindow' function.

This works for me on Chrome, Edge, Firefox. Playing a game though may still be tricky when you make a long moves down, which first triggers the top line in some mobile browsers and then the 'drag-down-reload'. I did not find out how this behavior could be manipulated...

greets, hc

[toly]

+1 for this feature