How can drag and drop to replace the elements I dragstart, drop all implemented.only I can’t replace the div. the function that can be replaced can be replaced . Only javascript.please help me.
const dragAndDrop = () => {
const zono1 = document.querySelector('.zono-1');
const zono2 = document.querySelector('.zono-2');
const zono3 = document.querySelector('.zono-3');
const zono4 = document.querySelector('.zono-4');
const zono5 = document.querySelector('.zono-5');
const zono6 = document.querySelector('.zono-6');
const zono7 = document.querySelector('.zono-5');
const zono8 = document.querySelector('.zono-6');
const cells = document.querySelectorAll('.js-cell')
const dragStart = function () {
setTimeout(() => {
this.classList.add('hide');
}, 0)
};
const dragEnd = function () {
this.classList.remove('hide');
};
const dragOver = function (evt) {
evt.preventDefault();
};
const dragEnter = function () {
console.log('enter')
};
const dragLeave = function () {
console.log('leave')
};
const dragDrop = function () {
// ?????????????????????????????????
};
cells.forEach((cell) => {
console.log(cell);
cell.addEventListener('dragover', dragOver);
cell.addEventListener('dragenter', dragEnter);
cell.addEventListener('dragleave', dragLeave);
cell.addEventListener('drop', dragDrop);
});
zono1.addEventListener('dragstart', dragStart);//all Element zono
zono1.addEventListener('dragend', dragEnd);
}
dragAndDrop()
<div class="zono-1 js-cell" draggable="true" >
<h3 id="title">javacript</h3>
</div>
<div class="zono-2 js-cell" draggable="true">
<h3 id="title">Ask a public question</h3>
</div>
<div class="zono-3 js-cell" draggable="true">
<h3 id="title">Step to Web</h3>
</div>
<div class="zono-4 js-cell" draggable="true">
<h3 id="title">Игровая консоль Microsoft Xbox ONE Black 500 Gb</h3>
</div>
<div class="zono-5 js-cell" draggable="true">
<h3 id="title">vue</h3>
</div>
<div class="zono-6 js-cell" draggable="true">
<h3 id="title">СВАРОГ REAL SMART ARC 160 (Z28103)</h3>
</div>
<div class="zono-7 js-cell" draggable="true">
<h3 id="title">СВАРОГ REAL MIG 200 (N24002N) BLACK (МАСКА+КРАГИ)</h3>
</div>
<div class="zono-8 js-cell" draggable="true">
<h3 id="title">TRITON ALUTIG 200P AC/DC</h3>
</div>
How can Drag and drop replace the elements I dragstart, drop all implemented.only I can’t replace the div. the function that can be replaced can be replaced . Only javascript.please help me.
You just need to get
from
element withdragstart
andto
element withevent.target
then usereplaceChild
to replace them