How can I move an element from one cell to the cell that I have highlighted?
- @model CheckerBoard.Models.HomeModel
- <html>
- <head>
<title>@Model.PageTitle</title>
<link href="~/Styles/Home.css" rel="stylesheet" />
</head>
- <body>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="~/Scripts/Home.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>
.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');
}
-
$(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"); }
});
-
});