gistfile1.txt

I copied this example http://chessboardjs.com/examples#5000 which integrates https://github.com/jhlywa/chess.js
Then I tweaked this script: <script src="js/chessboard.js"></script>
I changed the addEvents function to only register mouse event handler for desktops because when I tested it on old android browsers, touchstart and mousedown events were both firing:
 if (isTouchDevice() === true) {
    boardEl.on('touchstart', '.' + CSS.square, touchstartSquare);
    containerEl.on('touchstart', '.' + CSS.sparePieces + ' .' + CSS.piece,
      touchstartSparePiece);
    //$(window).on('touchmove', touchmoveWindow); nad cutout
    //$(window).on('touchend', touchendWindow); nad cutout
  } else { // all the same mouse stuff that is in the default setup 
  }
So basically, if it is a touch device, I got rid of all mouse handlers and even got rid of the touchmove and touchend handlers because we are tweaking to uses only touches. So only 'touchstart' are used for devices that are touch enabled.

Next I went to the 'touchstart' event handler and made these tweaks:
function touchstartSquare(e) {
  // do nothing if we're not draggable
  if (cfg.draggable !== true) return;  
  var square = $(this).attr('data-square');
    //only test if valid square -allow touch of empty square
  // CURRENT_POSITION[square] hold the piece at square, ex wP;
  if(validSquare(square) !== true) return;
   e = e.originalEvent;
   beginTOUCH(square, e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}

Originally, this method was only accepting touch on a valid square and a square with a piece on it. But since we want to touch twice, once to select a piece to move and a second time to select the destination location, I removed condition that the touch square must have a piece on it; I removed condition CURRENT_POSITION.hasOwnProperty(square) !== true
Originally, this method lastly called 'beginDraggingPiece(square, CURRENT_POSITION[square], e.pageX, e.pageY); which I replaced with a new but similar method: beginTOUCH(square, e.changedTouches[0].pageX, e.changedTouches[0].pageY);

And beginTOUCH is simply a duplicate of beginDraggingPiece except it coditionally checks if this is second click. If it is second click then it skips the dragging code and goes direct to the drop the piece to the new spot code which is a function named stopDraggedPiece():

var firstTouchMove = true;

function beginTOUCH(square, x, y){
  if(firstTouchMove){
    // no piece on this square 
    if (CURRENT_POSITION.hasOwnProperty(square) !== true) {
      return;  /* the first touch must be a peice */
    }    
    var piece = CURRENT_POSITION[square];
    // onDragStart function ensures correct color was touched by turn
    if ( cfg.onDragStart(square, piece, deepCopy(CURRENT_POSITION), CURRENT_ORIENTATION) === false) {
      return;
    }
    firstTouchMove = false;
    // set state
    DRAGGING_A_PIECE = true;
    DRAGGED_PIECE = piece;
    DRAGGED_PIECE_SOURCE = square;
    DRAGGED_PIECE_LOCATION = square;
    // capture the x, y coords of all squares in memory
    captureSquareOffsets();

    $('#' + SQUARE_ELS_IDS[square]).addClass(CSS.highlight1);

  } 
  else if( square == DRAGGED_PIECE_SOURCE) {
     $('#' + SQUARE_ELS_IDS[square]).removeClass(CSS.highlight1);
     firstTouchMove = true;
  } 
  else { 
    firstTouchMove = true;
    //this will replace the touchendWindow method
    stopDraggedPiece(square);
   
  }
}

Hello, und thanks for this. The Code not work for me! please check -> http://chessmir.net/staq-1.php

What you mean with dies: What you exacly changes??
"I changed the addEvents function to only register mouse event handler for desktops because when I tested it on old android browsers, touchstart and mousedown events were both firing:
if (isTouchDevice() === true) {
boardEl.on('touchstart', '.' + CSS.square, touchstartSquare);
containerEl.on('touchstart', '.' + CSS.sparePieces + ' .' + CSS.piece,
touchstartSparePiece);
//$(window).on('touchmove', touchmoveWindow); nad cutout
//$(window).on('touchend', touchendWindow); nad cutout
} else { // all the same mouse stuff that is in the default setup
}"

Please help me!
Thanks

To disable touch and then drag functionality I simply cutout those two lines.
Thats why I wrote 'nad cutout' so it is obvious what was changed.
//$(window).on('touchmove', touchmoveWindow); nad cutout
//$(window).on('touchend', touchendWindow); nad cutout

So now the touch drag code never runs. touchmove is the event that fires when you do a touch and then drag, and touchmoveWindows is the event handler. So I just got rid of it. Same goes for touchend event, which fires at the end of a touchmove.

Then I teaked the touchstart event handler so that it distinguishes between first and second touch.

How can I integrate this with vuejs