How to make a Drag-n-Drop in JavaScript

Okay so the earlier two blogs of mine got a lot of views and now I am thinking to make another blog tutorial so in this blog we are making a simple Drag-n-Drop feature in JavaScript and tbh its is very easy and simple to understand.

Source code for drag-n-drop

Follow me on Github

    <div class="container">
        <p class="draggable" draggable="true">1</p>
        <p class="draggable" draggable="true">2</p>
    </div>
    <div class="container">
        <p class="draggable" draggable="true">3</p>
        <p class="draggable" draggable="true">4</p>
    </div>

body {
    margin: 0;
    background-color: #ff4040;
}

.container {
    background-color: #333;
    padding: 1rem;
    margin-top: 1rem;
}

.draggable {
    padding: 1rem;
    background-color: white;
    border: 1px solid black;
    cursor: move;
}

.draggable.dragging {
    opacity: .5;
}

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})
containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

so thats the whole code imma not explain the html and css mainly because its pretty simple, we are just making some div and some paragraphs and in css we just styling them a little bit.

make sure to link your javascript and css to html

Ok so now let us learn what we are doing in javascript.

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})

so in the first and second line of code we are just adding our class as a const in javascript, we are using querySeletorAll because we dont have a single thing assigned with the same class.
okk so in the fourth like we make a forEach function for all of the draggables and then we just adding a EventListener in it and givin it 'dragstart' and adding style to it by using

draggable.classList.add

.
we are doing the same, but now we replacing dragstart with drag end and also instead of adding we are just removing the style.

containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

umm so now we making forEach for our div's ( containers ) and then adding a eventListener and just making a const and assigning querySeletor 'dragging' and then just appendChild which basically mean adding a child to it.

so you can make a basic drag and drop feature using this code and it was easy, right?

Blog

How to make a Drag-n-Drop in JavaScript

The Vik

Source code for drag-n-drop

Follow me on Github

Join Our Newsletter. No Spam, Only the good stuff.

Related