Хочу поменять местами значения в таблице. При переносе одного элемента в другой они должны поменяться местами.
<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();
При попытке переместить один элемент в другой получаю данный результат: