ChessBoardJS demo

by subsari

HTML

<script src="http://chessboardjs.com/js/chessboard.js"></script>
<!-- Used to get images -->
<base href="http://chessboardjs.com/" />
<div id="board" style="width: 400px"></div>

<span>FEN:</span><br/><span id="fen-position"></span><br/>
<input type="button" id="btn-get-fen-position" value="Get FEN"/>

CSS

/*!
 * chessboard.js $version$
 *
 * Copyright 2013 Chris Oakman
 * Released under the MIT license
 * https://github.com/oakmac/chessboardjs/blob/master/LICENSE
 *
 * Date: $date$
 */

/* clearfix */
.clearfix-7da63 {
  clear: both;
}

/* board */
.board-b72b1 {
  border: 2px solid #404040;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* square */
.square-55d63 {
  float: left;
  position: relative;

  /* disable any native browser highlighting */
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* white square */
.white-1e1d7 {
  background-color: #f0d9b5;
  color: #b58863;
}

/* black square */
.black-3c85d {
  background-color: #b58863;
  color: #f0d9b5;
}

/* highlighted square */
.highlight1-32417, .highlight2-9c5d2 {
  -webkit-box-shadow: inset 0 0 3px 3px yellow;
  -moz-box-shadow: inset 0 0 3px 3px yellow;
  box-shadow: inset 0 0 3px 3px yellow;
}

/* notation */
.notation-322f9 {
  cursor: default;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  position: absolute;
}
.alpha-d2270 {
  bottom: 1px;
  right: 3px;
}
.numeric-fc462 {
  top: 2px;
  left: 2px;
}

JavaScript

var onDrop = function(source, target, piece, newPos, oldPos, orientation) {
  updateFenPositionText();
  console.log("New position: " + ChessBoard.objToFen(newPos));
  console.log("Old position: " + ChessBoard.objToFen(oldPos));
};

var boardConfig = {
	draggable: true,
  dropOffBoard: 'trash',
  sparePieces: true,
  onDrop: onDrop
};

var board = new ChessBoard('board', boardConfig);

function updateFenPositionText(){
  $("#fen-position").text("");
  $("#fen-position").text(board.fen());
}