0

Хочу поменять местами значения в таблице. При переносе одного элемента в другой они должны поменяться местами.

 <div class="main__wrapper">
                <div class="main__cell">
                    <div id="1" class="card" draggable="true">
                        <div class="card__title">Title</div>
                        <div class="card__description">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, ipsa.
                        </div>
                        <div class="card__price">10$</div>
                        <button type="submit" class="card__button">Buy</button>
                    </div>
                </div>
                <div class="main__cell">
                    <div id="2" class="card" draggable="true">
                        <div class="card__title">Title</div>
                        <div class="card__description">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, ipsa.
                        </div>
                        <div class="card__price">10$</div>
                        <button type="submit" class="card__button">Buy</button>
                    </div>
                </div>
            </div>

Код в JS. Пытаюсь добавить элемент в функции - addInParent.

const dragAndDrop = () => {
  let card = document.querySelector(".card");
  let cells = document.querySelectorAll(".main__cell");
  let parent = undefined;

  function dragStart() {
    setTimeout(() => {
      this.classList.add("hide");
    }, 0);
    parent = this.parentNode;
  }
  function dragEnd() {
    this.classList.remove("hide");
  }
  function dragOver(event) {
    event.preventDefault();
  }
  function dragEnter() {
    this.classList.add("hovered");
  }
  function dragLeave() {
    this.classList.remove("hovered");
  }
  function dragDrop(event) {
    let b = document.elementFromPoint(event.clientX, event.clientY);
    let changeItem = b.parentNode.cloneNode(true);
    addInParent(changeItem);

    b.parentNode.remove();
    this.prepend(card);
  }

  function addInParent(item) {
    console.log(parent, item);
    parent.insertAdjacentText("afterbegin", item);
  }
  cells.forEach((cell) => {
    cell.addEventListener("dragover", dragOver);
    cell.addEventListener("dragenter", dragEnter);
    cell.addEventListener("dragleave", dragLeave);
    cell.addEventListener("drop", dragDrop);
  });
  card.addEventListener("dragstart", dragStart);
  card.addEventListener("dragend", dragEnd);
};
dragAndDrop();

введите сюда описание изображения

При попытке переместить один элемент в другой получаю данный результат:

введите сюда описание изображения

4
  • Пожалуйста, добавляйте код текстом, а не изображением, чтобы отвечающим было легче копировать и тестировать фрагменты. Commented 19 февр. 2021 в 15:32
  • вы видать плохо тот урок смотрели - там вроде парнишка достаточно хорошо объяснял ... Commented 19 февр. 2021 в 15:43
  • ещё раз посмотрите его: youtube.com/watch?v=-9qu_Z0D84g Commented 19 февр. 2021 в 15:44
  • @MaximLensky Да я этот урок смотрел, и вроде бы ничего не пропустил. Но я хочу добавить новый функционал - возможность перемешивать блоки в любом порядке, а у него в видео перемещает только 1 блок по нескольким клеточкам. Commented 19 февр. 2021 в 15:54

1 ответ 1

3

parent.insertAdjacentText("afterbegin", item); — здесь вторым аргументом ожидается строка, а вы передаёте элемент, поэтому он и преобразовывается в строку. Может, вы имели в виду insertAdjacentElement?

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.