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);
   
  }
}

How can I integrate this with vuejs