хранение значений в двух разных массивах на основе случайных индексов отличаются в JavaScript

Question

В приведенном ниже коде у меня есть массив notes с девятью jpg на нем и массивом items девять меток и девять URL-адресов на нем.

этот код имеет три поля. Он выбрал 3 items случайным образом из элементов массива.

Я поместил случайно выбранный элемент label в 3 поля, внутри теги <P> и corresponding image on background from массив элементы

Я сохранил соответствующие изображения заметок при выборе randomIndex в массиве выбранные заметки это называется box002 img src

Класс box002 можно перетащить на соответствующий номер в четырех отображаемых полях. затем синие цифры и фон в поле исчезают.

У меня есть рабочий код

Моя проблема в том, что я хочу, чтобы элемент box002 (круглая коробка) был таким же, как цифра прямоугольной рамки, теперь выпадение идет с левой стороны поля вперед

т. Е. В ПОЗИЦИИ ПОЛЬЗОВАТЕЛЯ: если цифра box002 (круглое поле) равна 2, капля (крайнее левое поле) должна быть синего 2 числа с фоновым URL-адресом image2

как изменить мой код, чтобы это произошло.

var randomIndex;
var array2 = [];

    var items = [{
        label: '1',
        url: 'https://via.placeholder.com/150x150.jpg?text=image1'
      },
      {
        label: '2',
        url: 'https://via.placeholder.com/150x150.jpg?text=image2'
      },
      {
        label: '3',
        url: 'https://via.placeholder.com/150x150.jpg?text=image3'
      },
      {
        label: '4',
        url: 'https://via.placeholder.com/150x150.jpg?text=image4'
      },
      {
        label: '5',
        url: 'https://via.placeholder.com/150x150.jpg?text=image5'
      },
      {
        label: '6',
        url: 'https://via.placeholder.com/150x150.jpg?text=image6'
      },
      {
        label: '7',
        url: 'https://via.placeholder.com/150x150.jpg?text=image7'
      },
      {
        label: '8',
        url: 'https://via.placeholder.com/150x150.jpg?text=image8'
      },
      {
        label: '9',
        url: 'https://via.placeholder.com/150x150.jpg?text=image9'
      }
    ];

    var notes = ['https://via.placeholder.com/75x75?text=1',
      'https://via.placeholder.com/75x75?text=2',
      'https://via.placeholder.com/75x75?text=3',
      'https://via.placeholder.com/75x75?text=4',                                                                                                              'https://via.placeholder.com/75x75?text=5',
      'https://via.placeholder.com/75x75?text=6',
      'https://via.placeholder.com/75x75?text=7',
      'https://via.placeholder.com/75x75?text=8',
      'https://via.placeholder.com/75x75?text=9'
    ];


    var tempimages = [];
    var notesselected = [];


    array2 = items.slice();

    var item;

    function rvalue() {

      ptags = document.querySelectorAll('[name="values"]');
      boxtags = document.getElementsByClassName("box");


    for (var index = 0; index < 3; index++) {
    randomIndex = Math.floor(Math.random() *array2.length)

    item = array2[randomIndex];
    array2.splice(randomIndex, 1);

    try {
    ptags[index].style.visibility = "visible";
    ptags[index].textContent = item.label;
    ptags[index].dataset.itemIndex = randomIndex;

    tempimages.push({data: item,index: randomIndex
    });
    notesselected.push({data: notes[randomIndex],
    index: randomIndex});

    boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
    } catch (err) {
    console.log('Exception');
    }

      }

    var tlen = tempimages.length;
    }


    function displayAllImages() {
    try {
    if (tempimages.length == 0) {
    rvalue();
    }

    var arr2 = notesselected;
    item = arr2.shift();

    image = document.getElementById('slide');
        //image.src = "images/"+item.data.url;
    image.src = item.data;
    image.dataset.itemIndex = item.index;
    } catch (err) {
    console.log(err.message);
    }
    };

    $(function() {
    displayAllImages();
    });

    function allowDrop(ev) {
    ev.preventDefault();
    }

    function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var el = document.getElementById(data);

    var x = document.getElementById("slide").dataset.itemIndex;
    var y = ev.target.dataset.itemIndex;


    if (x == y) {
    ev.currentTarget.style.backgroundColor = 'initial';
    ev.currentTarget.style.backgroundImage = 'initial';
    ev.currentTarget.style.border = 'initial';
    var pParagraph = ev.currentTarget.firstElementChild;

    pParagraph.style.visibility = "hidden";

    item = this.item;
    var arrayvalue = item.dataindex;

    tempimages.splice(arrayvalue, 1);

    if (tempimages.length == 0)
    {
    rvalue();
    }
    displayAllImages();
      } 
    else {
    alert("WRONG PLACED");
    }
    }

body {
      overflow: hidden;
    }

    .box {
      width: calc(10.3% - 4px);
      display: inline-block;
      border-radius: 5px;
      border: 2px solid #333;
      border: #000 border-color: #e6e600;
      margin: -2px;
      border-radius: 0%;
      background-color: #99ffff;
    }

    .box {
      height: 15vh;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      background-size: contain;
    }

    .box002 {
      position: absolute;
      top: 10.3vh;
      left: 40.98vw;
      cursor: pointer;
    }

    .box002 img {
      width: 14.0vw;
      height: 23.0vh;
      border-radius: 50%;
    }

    p {
      font: "Courier New", Courier, monospace;
      font-size: 30px;
      color: rgba(0, 0, 0, 0.6);
      text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
      color: #005ce6;
      text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container2">
      <div class="containerr">
        <div class="pic" id="content">


    <div id="container">

    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
       <p name="values"></p>
    </div>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
       <p name="values"></p>
    </div>
    <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
       <p name="values"></p>
    </div>
          </div>
        </div>
      </div>
    </div>

    <div class="box002" draggable="true" ondragstart="drag(event)" id="2">
      <img src="" draggable="true" id="slide" border="rounded" />
    </div>