паззл на canvas js, как сделать, чтобы тянулась только верхняя картинка

Пишу паззл на canvas js. Есть баг. если перетянуть одну картинку поверх другой, потом они тянутся вместе. Подкиньте, пожалуйста, идею, как это исправить???

         mouseDown(e) {
            e.preventDefault();
            e.stopPropagation();

            let mouseX = parseInt(e.clientX - offsetX);
            let mouseY = parseInt(e.clientY - offsetY);

            dragok = false;

            for (let i = 0; i < rightField.length; i++) {
              let a = rightField[i];
              if (mouseX > a.x && mouseX < a.x + a.s && mouseY > a.y && mouseY < a.y + a.s) {
                dragok = true;
                a.isDragging = true;
                a.isActive = true;
                score++;
              }
            }
            startX = mouseX;
            startY = mouseY;

            for (let j = 0; j < leftField.length; j++) {
              let b = leftField[j];
              if (mouseX > b.x && mouseX < b.x + b.s && mouseY > b.y && mouseY < b.y + b.s) {
                b.isEmpty = true;
              }
            }
          }

          mouseMove(e) {

            let mouseX = parseInt(e.clientX - offsetX);
            let mouseY = parseInt(e.clientY - offsetY);
            let distanceX = mouseX - startX;
            let distanceY = mouseY - startY;

            if (dragok) {

              for (let i = 0; i < rightField.length; i++) {
                let a = rightField[i];
                if (a.isDragging && a.x <= 0) {
                  a.x = 1;
                  dragok = false;
                } else if (a.isDragging && a.x >= containerSize.width - a.s) {
                  a.x = containerSize.width - a.s - 1;
                  dragok = false;
                } else if (a.isDragging && a.y >= containerSize.height - a.s) {
                  a.y = containerSize.height - a.s - 1;
                  dragok = false;
                }
                else if (a.isDragging && a.y <= 0) {
                  a.y = 1;
                  dragok = false;
                }
                else if (a.isDragging) {
                  a.x += distanceX;
                  a.y += distanceY;
                }
              }
              startX = mouseX;
              startY = mouseY;
            }
            playingField.draw();
          }

          mouseUp(e) {

            let mouseX = parseInt(e.clientX - offsetX);
            let mouseY = parseInt(e.clientY - offsetY);

            dragok = false;

            for (let j = 0; j < leftField.length; j++) {
              let b = leftField[j];
              for (let i = 0; i < rightField.length; i++) {
                let a = rightField[i];
                a.isActive = false;
                if (mouseX > b.x && mouseX < b.x + b.s && mouseY > b.y && mouseY < b.y + b.s && a.isDragging && b.isEmpty) {
                  a.x = b.x;
                  a.y = b.y;
                  b.isEmpty = false;
                  if (a.value === b.value) {
                    b.isChecked = true;
                  }
                }
              }
            }

            for (let j = 0; j < rightField.length; j++) {
              rightField[j].isDragging = false;
            }
          }
        }

Ответы (1 шт):

Автор решения: p1uton

В функции mouseDown, когда определяется над каким элементом находится курсор, нет выхода из цикла. Соответственно, если два (или более) элемента частично перекрывают друг друга и курсор находится сразу над несколькими элементами, то все элементы получат isDragging = true.

→ Ссылка