Как реализовать перенос изображения из одного div'a в другой или оставить в текущем, через кнопки в модальном окне - JS?

Question

Искал подобные вопросы, но так и не нашел ничего, что подходило бы под условие моей задачи. Помогите пожалуйста..

Задача: "Реализовать в документе 2 вертикальных ряда картинок в левой и правой части окна. При щелчке на картинку она должна в увеличенном виде отображаться в центре документа в модальном режиме с двумя ссылками «вправо» и «влево», позволяющими или перенести картинку в противоположный список, или вернуть в первоначальный."

Собственно столкнулся со следующими трудностями:

Я не знаю, как реализовать перенос из одного контейнера в другой (возможно это гораздо проще решается использованием таблицы или только ей).
Не значительно, но если вы сможете подсказать как отобразить в одном div'е изображения вертикально (не прибегая к тэгу br в разметке) то буду отдельно благодарен.

Мой код:

// modal.js
var modal = document.getElementById('Modal');
var modalImg = document.getElementById('img01');
var span = document.getElementsByClassName('close')[0];

var img;

for (var i = 0; i < 4; i++) {
    img = document.getElementById('img' + i);
    img.onclick = function() {
        modal.style.display = "block";
        modalImg.src = this.src;
    }
}

span.onclick = function() {
    modal.style.display = "none";
}

/* main.css */
.F-Container,
.S-Container {
    margin: 50px;
    padding: 25px;
    border: 2px solid #000;
}

.F-Container img,
.S-Container img {
    object-fit: cover;
    width: 300px;
    height: 200px;
}

.F-Container {
    float: left;
}

.S-Container {
    float: right;
}

/* modal.css */
.Modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
}

.Modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.btns {
    margin-top: 15px;
    text-align: center;
}

#b-left,
#b-right {
    display: inline-block;
    background-color: #151515;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    margin: 0 5px 0 5px;
    text-decoration: none;
    border: none;
    width: 100px;
    font-size: 32px;
    cursor: pointer;
}

.close {
    position: absolute;
    top: 40px;
    right: 45px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS</title>

    <!-- CSS Connect -->

  

      <!-- Сбрасывает стили браузера -->
        <link rel="stylesheet" href="./css/reset.css">

        <!-- Собственные стили -->
        <link rel="stylesheet" href="./css/main.css">
        <link rel="stylesheet" href="./css/modal.css">
    </head>

    <body>
        <div class="F-Container">
            <img src="./img/img01.jpg" id='img' alt="shoes">
            <img src="./img/img02.jpg" id='img' alt="shoes">
        </div>
        <div class="S-Container">
            <img src="./img/img03.jpg" id='img' alt="cap">
            <img src="./img/img04.jpg" id='img' alt="cap">
        </div>

        <div class="Modal" id="Modal">
            <span class="close" onclick="document.getElementById('Modal').style.display='none'">&times;</span>
            <img class="Modal-content" id="img01">
            <div class="btns">
                <button id="b-left">&larr;</button>
                <button id="b-right">&rarr;</button>
            </div>
        </div>

        <!-- JS connect -->
        <script src="./js/modal.js"></script>
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
    </body>

    </html>

Answer 1

const list = [...document.querySelectorAll('.list')],
  layer = document.querySelector('.layer'),
  container = document.querySelector('.container'),
  buttons = [...document.querySelectorAll('.buttons span')];

document.querySelectorAll('.wrapper img').forEach(el => {
  el.addEventListener('click', e => {
    container.prepend(el);
    layer.classList.add('open');
  });
});

buttons.forEach(btn => {
  btn.addEventListener('click', e => {
    let currentList = list[buttons.indexOf(e.target)];
    layer.classList.remove('open');
    currentList.prepend(container.querySelector('img'));

    // Сортировка, если нужно
    [...currentList.querySelectorAll('img')]
    .sort((a, b) => a.dataset.order - b.dataset.order)
      .forEach(el => currentList.appendChild(el));
  });
});

* {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100vh;
}

.list {
  width: 25%;
  max-width: 150px;
  outline: 1px solid #999;
}

.list img {
  cursor: pointer;
}

.layer {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.layer::-webkit-scrollbar {
  display: none;
}

.layer.open {
  visibility: visible;
  opacity: 1;
  transition: all 0.3s linear;
}

.container {
  max-width: 50%;
}

.buttons {
  text-align: center;
}

.buttons span {
  display: inline-block;
  padding: 0 20px 5px;
  background: #555;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

<div class="wrapper">
  <div class="list">
    <img src="https://via.placeholder.com/500/?text=1" data-order="1" alt="">
    <img src="https://via.placeholder.com/500/?text=2" data-order="2" alt="">
    <img src="https://via.placeholder.com/500/?text=3" data-order="3" alt="">
    <img src="https://via.placeholder.com/500/?text=4" data-order="4" alt="">
    <img src="https://via.placeholder.com/500/?text=5" data-order="5" alt="">
  </div>
  <div class="list"></div>
</div>
<div class="layer">
  <div class="container">
    <div class="buttons">
      <span>&laquo;</span>
      <span>&raquo;</span>
    </div>
  </div>
</div>

Answer 2

Мой вариант. Написано с костылями, но для понимания алгоритма пойдет

html

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS</title>

    <!-- Собственные стили -->
    <link rel="stylesheet" href="css.css">
</head>

<body>
    <div class="L-Container" id ="L-Container">
        <img class="img" src="img/1.png" id="img" alt="shoes">
        <img class="img" src="img/2.png" alt="shoes">
    </div>
    <div class="R-Container" id ="R-Container">
        <img class="img" src="img/3.png" alt="cap">
        <img class="img" src="img/4.png" alt="cap">
    </div>

    <div class="Modal" id="Modal">
        <span class="close" onclick="document.getElementById('Modal').style.display='none'">&times;</span>
        <img class="Modal-content" id="img01">
        <div class="btns">
            <button id="b-left">&larr;</button>
            <button id="b-right">&rarr;</button>
        </div>
    </div>

    <!-- JS connect -->
    <script src="js.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
</body>

</html>

css

/* main.css */
.L-Container,
.R-Container {
    margin: 50px;
    padding: 25px;
    border: 2px solid #000;
}

.L-Container img,
.R-Container img {
    object-fit: cover;
    width: 300px;
    height: 200px;
}

.L-Container {
    float: left;
    display: flex;
    flex-direction: column;
}

.R-Container {
    float: right;
    display: flex;
    flex-direction: column;
}

/* modal.css */
.Modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.8);
}

.Modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.btns {
    margin-top: 15px;
    text-align: center;
}

#b-left,
#b-right {
    display: inline-block;
    background-color: #151515;
    color: #ffffff;
    text-align: center;
    padding: 10px;
    margin: 0 5px 0 5px;
    text-decoration: none;
    border: none;
    width: 100px;
    font-size: 32px;
    cursor: pointer;
}

.close {
    position: absolute;
    top: 40px;
    right: 45px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbbbbb;
    text-decoration: none;
    cursor: pointer;
}

js

let modal = document.getElementById('Modal');
let lContainer = document.getElementById('L-Container')
let rContainer = document.getElementById('R-Container')

let bLeft = document.getElementById('b-left');
let bRight = document.getElementById('b-right');

let imgs = document.getElementsByClassName('img');

let modalImg = document.getElementById('img01');
let span = document.getElementsByClassName('close')[0];

let curPos;
let curEl;

function getImg(e) {
    modal.style.display = "block";
    modalImg.src = this.src;
    curPos = e['path'][1]['classList'][0];
    curEl = e['path'][0];
}

for (let i = 0; i < imgs.length; i++) {
    imgs[i].onclick = getImg;
}


bRight.onclick = function (e) {
    if (curPos == "L-Container") {
        let newImg = document.createElement("img");
        newImg.className = "img";
        newImg.src = modalImg.src;
        newImg.onclick = getImg;
        rContainer.append(newImg);
        curEl.remove();
        modal.style.display = "none";
    } else {
        modal.style.display = "none";
    }
}

bLeft.onclick = function (e) {
    if (curPos == "R-Container") {
        let newImg = document.createElement("img");
        newImg.className = "img";
        newImg.src = modalImg.src
        newImg.onclick = getImg;
        lContainer.append(newImg);
        curEl.remove();
        modal.style.display = "none";
    } else {
        modal.style.display = "none";
    }
}


span.onclick = function () {
    modal.style.display = "none";
}

БЛОГ НА HUSL

Как реализовать перенос изображения из одного div'a в другой или оставить в текущем, через кнопки в модальном окне - JS?

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