Необходимо сделать так, чтобы при нажатии на первый элемент, сдвигались на место все, стоящие за ним. А если двигать из начального положения, то нужно чтобы каждая следующая фишка двигала все предыдущие. например, если двигать вторую сразу, то вместе с ней должна сдвинуться и первая (сразу две): Пока что "фишки" могут только перемещаться влево и обратно на своё место каждая:
fishka1_1.addEventListener("click", () => {
fishka1_1.classList.toggle("fishka1_1-final")
fishka1_1.classList.toggle("fishka1_1-initial")
})
fishka1_2.addEventListener("click", () => {
fishka1_2.classList.toggle("fishka1_2-final")
fishka1_2.classList.toggle("fishka1_2-initial")
})
fishka1_3.addEventListener("click", () => {
fishka1_3.classList.toggle("fishka1_3-final")
fishka1_3.classList.toggle("fishka1_3-initial")
})
fishka1_4.addEventListener("click", () => {
fishka1_4.classList.toggle("fishka1_4-final")
fishka1_4.classList.toggle("fishka1_4-initial")
})
fishka1_5.addEventListener("click", () => {
fishka1_5.classList.toggle("fishka1_5-final")
fishka1_5.classList.toggle("fishka1_5-initial")
})
fishka1_6.addEventListener("click", () => {
fishka1_6.classList.toggle("fishka1_6-final")
fishka1_6.classList.toggle("fishka1_6-initial")
})
fishka1_7.addEventListener("click", () => {
fishka1_7.classList.toggle("fishka1_7-final")
fishka1_7.classList.toggle("fishka1_7-initial")
})
fishka1_8.addEventListener("click", () => {
fishka1_8.classList.toggle("fishka1_8-final")
fishka1_8.classList.toggle("fishka1_8-initial")
})
fishka1_9.addEventListener("click", () => {
fishka1_9.classList.toggle("fishka1_9-final")
fishka1_9.classList.toggle("fishka1_9-initial")
})
fishka1_10.addEventListener("click", () => {
fishka1_10.classList.toggle("fishka1_10-final")
fishka1_10.classList.toggle("fishka1_10-initial")
})
html {
scroll-behavior: smooth;
}
body {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 16px;
line-height: 1.5;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
}
h2 {
font-size: 50px;
margin-bottom: 58px;
}
h3 {
font-size: 25px;
margin-bottom: 28px;
}
a {
text-decoration: none;
}
section {
padding-top: 113px;
text-align: center;
}
p {
margin: 0;
}
ul,
li {
display: block;
padding: 0;
margin: 0;
}
.container {
width: 1000%;
width: 781.13px;
height: 933.96px;
/* max-width: 781.13px;
min-width: 933.96px;*/
/*позиционирование по центру*/
margin: 0 auto;
justify-content: center;
display: block;
}
.pole {
background: url('../img/1.svg') no-repeat center top / cover;
width: 900px;
height: 1052.83px;
text-align: center;
margin: auto;
position: relative;
}
.str_1 {
margin-top: -12px;
display: flex;
float: right;
margin-right: 20px;
}
.str_2 {
margin-top: 6px;
display: flex;
float: right;
margin-right: 20px;
}
.str_3 {
margin-top: 6px;
display: flex;
float: right;
margin-right: 20px;
}
.str_4 {
margin-top: 6px;
display: flex;
float: right;
margin-right: 20px;
}
.str_5 {
margin-top: 5px;
display: flex;
float: right;
margin-right: 20px;
}
.str_6 {
margin-top: 5px;
display: flex;
float: right;
margin-right: 20px;
}
.str_7 {
margin-top: 5px;
display: flex;
float: right;
margin-right: 20px;
}
.str_8 {
margin-top: 5px;
display: flex;
float: right;
margin-right: 20px;
}
.str_9 {
margin-top: 6px;
display: flex;
float: right;
margin-right: 20px;
}
.str_10 {
margin-top: 5px;
display: flex;
float: right;
margin-right: 20px;
overflow: auto;
}
.fishka {
overflow: auto;
}
.fishka:hover {
cursor: grabbing;
}
.fishka1_1-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_1-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_2-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_2-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_3-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_3-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_4-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_4-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_5-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_5-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_6-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_6-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_7-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_7-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_8-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_8-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_9-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_9-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
.fishka1_10-initial {
/* Стили, определяющие начальное положение
элемента на странице, например: */
transform: translateX(0px);
}
.fishka1_10-final {
/* Стили, определяющие конечное положение, например: */
transform: translateX(-260px);
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.."></script>
</head>
<body>
<section id="pole" class="pole">
<div class="container">
<div class="str_1">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka1_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka1_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka1_10" onclick="">
</div>
<div class="str_2">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka2_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka2_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka2_10" onclick="">
</div>
<div class="str_3">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka3_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka3_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka3_10" onclick="">
</div>
<div class="str_4">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka4_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka4_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka4_10" onclick="">
</div>
<div class="str_5">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka5_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka5_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka5_10" onclick="">
</div>
<div class="str_6">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka6_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka6_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka6_10" onclick="">
</div>
<div class="str_7">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka7_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka7_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka7_10" onclick="">
</div>
<div class="str_8">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka8_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka8_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka8_10" onclick="">
</div>
<div class="str_9">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_2" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka9_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka9_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka9_10" onclick="">
</div>
<div class="str_10">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_1" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_2" style="position: relative; margin-right: 0px" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_3" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_4" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka10_5" onclick="">
<img src="img/тёмная.svg" alt="fishka" class="fishka" id="fishka10_6" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_7" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_8" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_9" onclick="">
<img src="img/светлая.svg" alt="fishka" class="fishka" id="fishka10_10" onclick="">
</div>
</div>
</section>
</body>
</html>