Javascript Drag and drop change div dragDrop

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.

Leave a Comment