boxes and swapping

by chris callaghan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="box" id="one">
    <h4>one</h4>
	<button class="btn left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
    <button class="btn right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
    <button class="btn top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
    <button class="btn down"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></button>
  </div>

  <div class="box" id="two">
    <h4>two</h4>
	<button class="btn left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
    <button class="btn right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
    <button class="btn top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
    <button class="btn down"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></button>
  </div>

  <div class="box" id="three">
    <h4>three</h4>
	<button class="btn left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
    <button class="btn right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
    <button class="btn top"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
    <button class="btn down"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></button>
  </div>

  <div class="box" id="four">
    <h4>four</h4>
	<button class="btn left"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
    <button class="btn right"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
   ...

CSS

.box {
  height: 25%;
  width: 45%;
  padding: 1%;
  margin-left: 1%;
  margin-top: 1%;
  border: 1px solid black;
  float: left;
}

/*
.disabled-btn {
  cursor: not-allowed;
  opacity: 0.25%;
}
*/

JavaScript

$(".container").on("click", ".right", function(e) {
  var currentBox = $(this).parents('.box');
  var currentIndex = $(".box").index(currentBox);
  console.log(currentIndex, "right", currentBox);
  
  swapContent(
  	currentBox,
    $(".box").eq(currentIndex+1)
  );
  
  resetButtons();
});

$(".container").on("click", ".left", function(e) {
  var currentBox = $(this).parents('.box');
  var currentIndex = $(".box").index(currentBox);
  console.log(currentIndex, "left", currentBox);
  
  swapContent(
  	currentBox,
    $(".box").eq(currentIndex-1)
  );
  resetButtons();
});

$(".container").on("click", ".top", function(e) {
  var currentBox = $(this).parents('.box');
  var currentIndex = $(".box").index(currentBox);
  console.log(currentIndex, "top", currentBox);
  
  swapContent(
  	currentBox,
    $(".box").eq(currentIndex-2)
  );
  resetButtons();
});

$(".container").on("click", ".down", function(e) {
  var currentBox = $(this).parents('.box');
  var currentIndex = $(".box").index(currentBox);
  console.log(currentIndex, "down", currentBox);
  
  swapContent(
  	currentBox,
    $(".box").eq(currentIndex+2)
  );

  resetButtons();
});

// Initial run/load
resetButtons();

function swapContent(divA, divB) {
	var tempDiv = divA.html();
  divA.html(divB.html());
  divB.html(tempDiv);
}

function resetButtons() {
  // enable all buttons
	$("button").prop("disabled", false).show();
  
  // First box (top left), disable top and left
  var firstBox = $(".box").eq(0);
  firstBox.find(".top").prop("disabled", true).hide();
  firstBox.find(".left").prop("disabled", true).hide();
  
  // Second box (top right), disable top and right
  var secondBox = $(".box").eq(1);
  secondBox.find(".top").prop("disabled", true).hide();
  secondBox.find(".right").prop("disabled", true).hide();
  
  // Third box (bottom left), disable down and left
  var thirdBox = $(".box").eq(2);
  thirdBox.find(".down").prop("disabled", true).hide();
  thirdBox.find(".left").prop("disabled",...