JQuery棋盘格

Question

这里是我为棋盘提出的代码，但只需要帮助我在棋盘上添加一些东西。我知道使用了bind和draggable方法但不确定如何做到这一点。

如果单击空单元格，则不会发生任何操作。     如果单击已占用的单元格，请选择该单元格并直观地突出显示该单元格。     如果选择了单元格，则单击的下一个单元格将接收您选择移动的单元格。     如果移动到最初选择的同一个单元格，则取消选择单元格并且不会发生任何操作。     没有规则可以移动，移动到的单元格上存在的任何部分都会被销毁。

Demo

HTML

<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>

CSS

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

JQuery

$(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");
}
});