是否可以使用hasClass和addClass移动棋盘片段？

Question

$(document).ready(function()
{
    var cells = $(".cell");
    var colorCount = 0; 

    for (var i = 0; i < cells.length; i++)
    {
        var cell = $(cells[i]);
        var isDark = colorCount % 2 == 0;
        var isNextRow = (i + 1) % 8 == 0;
        colorCount += isNextRow ? 2 : 1;
        cell.css("background-color", isDark ? "navy" : "white"); 
    }
    $(".cell.piece.red").on({
        click: function () {
            $(this).css("background-color", "yellow"); }
    });
    $(".cell.piece.black").on({
        click: function () {
            $(this).css("background-color", "yellow");  }
    });
      
     
});

.home > .board
{
    display: table;
    border: 1px solid black;
}

.home > .board > .row
{
    display: table;
}

.home > .board > .row > .cell
{
    width: 80px;
    height: 80px;
    border: 1px solid black;
    display: inline-block;
}

.piece
{
    background-size: 75px 75px;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}

.red
{
    background-image: URL('../images/red.png');
}

.black
{
    background-image: URL('../images/black.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home">
            
                <div class="board">
                    <div class="row">
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                    </div>
                    <div class="row">
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                        <div class="cell piece red"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                        <div class="cell"></div>
                    </div>
                    <div class="row">
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                    </div>
                    <div class="row">
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                        <div class="cell piece black"></div>
                    </div>
                </div>

            </div>

    </body>

</html>

我在棋盘上有这个红色和黑色棋盘片，但我怎么让它们移动。例如，如果我想将第一个棋盘红色部分移动到第17个单元格，我该怎么做？为了澄清，我想要做的是当我点击第一个红色突出显示的棋盘片时，我希望它移动到下一个衣柜空置的单元格，在我的情况下将是棋盘格的第十七个单元格。请非常感谢棋盘上任何元素的任何示例，以便我完全学习如何移动棋盘片。我有三个文件，它们是JavaScript文件，CSS文件和HTML文件。