Javascript Drag and drop change div dragDrop

by

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.

9 thoughts on “Javascript Drag and drop change div dragDrop”

  1. You just need to get from element with dragstart and to element with event.target then use replaceChild to replace them

    var from;

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 (event) {
        from = event.target.cloneNode(true);
        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 (event) {
        let to = event.target;
        to.parentNode.replaceChild(from, to);
    };

    cells.forEach((cell) => {
        cell.addEventListener('dragstart', dragStart);
        cell.addEventListener('dragend', dragEnd);
        cell.addEventListener('dragover', dragOver);
        cell.addEventListener('dragenter', dragEnter);
        cell.addEventListener('dragleave', dragLeave);
        cell.addEventListener('drop', dragDrop);
    });
}
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>
    Reply

Leave a Comment