Внедрение объекта в свёрстанную доску на js

Имеется шахматная доска, реализованная следующим образом:

var FIELD_SIZE_X = 10;
var FIELD_SIZE_Y = 10;

var ON_BOARD_TEXT = [' ','A','B','C','D','E','F','G','H',' '];

var ON_BOARD_NUMBERS = ['','1','2','3','4','5','6','7','8',''];

generateGameField();

function generateGameField() {

    var gameField = document.createElement('table');

    for (var i = 0; i < FIELD_SIZE_X; i++) {

        var row = document.createElement('tr');

        for (j = 0; j < FIELD_SIZE_Y; j++) {

            var col = document.createElement('td');

            if(i == 0 || j == 0 || i == FIELD_SIZE_X - 1 || j == FIELD_SIZE_Y - 1) {

                col.innerText = ON_BOARD_TEXT[j];

                    if(j == FIELD_SIZE_Y - 1 || i == 0){

                        col.className += 'rotate ';
                        col.innerText = ON_BOARD_TEXT[j];

                    }
                        if (j == 0 || j == 9) {

                            col.innerHTML = ON_BOARD_NUMBERS[i];

                        } 

            }  
                else {

                    col.className = (i + j) % 2 == 0 ? 'white-cell' : 'black-cell';

                }

            row.appendChild(col);
        }
        gameField.appendChild(row);
    }
    document.getElementById('gameField').appendChild(gameField);

}

Есть массив объектов (шахматные фигуры):

var figs = [
    { x: 8,
      y: 0,
      figure: '♜' },
    { x: 8,
      y: 1,
      figure: '♞' },
    { x: 8,
      y: 2,
      figure: '♝' },
    { x: 8,
      y: 3,
      figure: '♛' },
    { x: 8,
      y: 4,
      figure: '♚' },
    { x: 8,
      y: 5,
      figure: '♝' },
    { x: 8,
      y: 6,
      figure: '♞' },
    { x: 8,
      y: 7,
      figure: '♜' },
    { x: 7,
      y: 0,
      figure: '♟' },
    { x: 7,
      y: 1,
      figure: '♟' },
    { x: 7,
      y: 2,
      figure: '♟' },
    { x: 7,
      y: 3,
      figure: '♟' },
    { x: 7,
      y: 4,
      figure: '♟' },
    { x: 7,
      y: 5,
      figure: '♟' },
    { x: 7,
      y: 6,
      figure: '♟' },
    { x: 7,
      y: 7,
      figure: '♟' },
    { x: 2,
      y: 0,
      figure: '♙' },
    { x: 2,
      y: 1,
      figure: '♙' },
    { x: 2,
      y: 2,
      figure: '♙' },
    { x: 2,
      y: 3,
      figure: '♙' },
    { x: 2,
      y: 4,
      figure: '♙' },
    { x: 2,
      y: 5,
      figure: '♙' },
    { x: 2,
      y: 6,
      figure: '♙' },
    { x: 2,
      y: 7,
      figure: '♙' },
    { x: 1,
      y: 0,
      figure: '♖' },
    { x: 1,
      y: 1,
      figure: '♘' },
    { x: 1,
      y: 2,
      figure: '♗' },
    { x: 1,
      y: 3,
      figure: '♕' },
    { x: 1,
      y: 4,
      figure: '♔' },
    { x: 1,
      y: 5,
      figure: '♗' },
    { x: 1,
      y: 6,
      figure: '♘' },
    { x: 1,
      y: 7,
      figure: '♖' }
] 

Вопрос: как реализовать размещение объектов на шахматной доске? И сделать их в перспективе подвижными.