JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<input type="image" onClick="deplace(0,-20);return false;" src="haut.gif" width="68" height="16" border="0" alt="haut">
<input type="image" onClick="deplace(0,20);return false;" src="bas.gif" width="68" height="16" border="0" alt="bas">
<input type="image" onClick="deplace(-20,0);return false;" src="gauche.gif" width="68" height="16" border="0" alt="gauche">
<input type="image" onClick="deplace(20,0);return false;" src="droite.gif" width="68" height="16" border="0" alt="droite">

<h2>Bibliotheques</h2>

<!-- La zone qui comprend les images à sélectionner -->
<div id="title">-------Colonne 1------- </div>
<div id="Echantillon">
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case case-bleue" id="casebleue"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="case"></div>
  <div class="test" id="box1"></div>
</div>

<!-- la zone avec les images sélectionnées -->
<div id="selection">
  <span style="position: absolute; top: 50px; left: 100px; width: 242px;heigth: 84px;"></span>
  <div id="title1">Colonne1</div>
</div>

CSS

#Echantillon {
  position: relative;
  display: grid;
  grid-template-columns: 20px 20px 20px 20px;
  grid-template-rows: 20px 20px 20px 20px;
}
  .case {
    background: pink;
    border: 1px solid #fff;
  }
  .case-bleue {
    background: blue;
  }
  .case-verte {
    background: green;
  }

.test {
  position: absolute;
  background: red;
  height: 10px;
  width: 10px;
  top: 5px;
  left: 5px;
}

JavaScript

const casebleue = document.getElementById('casebleue');

function compare(x,y) {
  return x === 65 && y === 25;
}

function deplace(x,y) {
  let e=document.getElementById("box1");
  let xe=e.offsetLeft;
  let ye=e.offsetTop;
  let new_xe = xe + x;
  let new_ye = ye + y;
  
  if(new_xe > 0 && new_xe < 80) {
  	document.getElementById("box1").style.left = xe + x +"px";
  }
  if(new_ye > 0 && new_ye < 80) {
  	document.getElementById("box1").style.top = ye + y +"px";
  }
  
  if( compare(new_xe, new_ye)) {
  	casebleue.classList.add('case-verte');
  } else {
  	casebleue.classList.remove('case-verte');
  }
}