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.

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

  4. Pingback: stevia keto

  23. Hey there, You’ve done an excellent job.

    I will definitely digg it and personally recommend to my friends.

    I am sure they will be benefited from this web site.

    Reply

  24. Have you ever thought about writing an ebook or guest authoring
    on other websites? I have a blog centered on the same
    subjects you discuss and would love to have you share some
    stories/information. I know my viewers would enjoy your work.
    If you’re even remotely interested, feel free
    to shoot me an e-mail.

    Reply

  25. I am really loving the theme/design of your site. Do you ever run into any internet browser compatibility issues?
    A couple of my blog audience have complained about my blog not working correctly in Explorer but looks great in Safari.
    Do you have any suggestions to help fix this problem?

    Reply

  30. Howdy would you mind letting me know which webhost you’re working
    with? I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot
    quicker then most. Can you suggest a good hosting provider at a fair price?
    Thank you, I appreciate it!

    Reply

  31. What i don’t realize is in fact how you’re
    now not actually much more neatly-preferred than you might be right now.

    You’re very intelligent. You know therefore considerably with regards to
    this subject, produced me for my part consider it from a lot of
    numerous angles. Its like women and men are not fascinated unless it is something to accomplish with Lady gaga!

    Your personal stuffs nice. At all times maintain it up!

    Reply