Simple Javascript Drag & Drop

Bare Bones Interactivity

One of the more satisfying experiences in the interface of modern operating systems is dragging-and-dropping. It’s incredibly intuitive and looks quite smooth.

Everyday functionality.

I wanted to add this functionality to my Javascript web apps, but the example code I was finding looked daunting– there were usually around 150 lines with tons of event listeners and I had no idea which was which.

As it turns out, a lot of that is fluff. The actual code to make it happen, though not in the prettiest way, is about 30 lines of Javascript long.

The HTML

It begins with the draggable HTML attribute. Setting this to “true” on an element allows it to be clicked and dragged around the screen. I created this simple example directly in the HTML file, but it could just as easily be created with document.createElement.

<div class="container">
  <div class="box" draggable="true"></div>
</div>
<div class="container">
</div>

Dragging an element.

But that’s kind of useless.

The Javascript

This is where the eventListeners come into play. There are quite a few for draggable objects, but basic functionality can be achieved with just three of them.

const box = document.getElementsByClassName('box')[0]
const containers = document.getElementsByClassName('holder')
for(const container of containers) {
  container.addEventListener("dragover", dragover)
  container.addEventListener("dragenter", dragenter)
  container.addEventListener("drop", drop)
}

For each of my containers on the screen I go through and add an eventListener for an element being Dragged Over, Dragged Into, and Dropped Onto.

function dragover(e) {
  e.preventDefault()
}
function dragenter(e) {
  e.preventDefault()
}
function drop() {
  this.append(box)
}

These are all static functions inside of my App class, though I’m displaying them as if they were in an index.js file.

The dragover and dragenter events need to have their default behavior removed in order for drop to function, so we have them as listeners to remove that functionality.

The last function just appends the “box” element we declared earlier into “this”, which at this point refers to the container that is being dropped into.

The rest of the listeners can be used for styling effects, such as changing the borders, colors, or any other CSS qualities.

Our beautiful creation.

One important thing to note is the dragged element is just a snapshot of the element as it was first dragged, so you may end up with strange things like in my code below where you change the class to get new styling and immediately change it back.

Find out Free courses on Quick Code for various programming languages. Get new updates on Messenger.

There are a lot of other features found in draggable elements, but this is enough to add some basic functionality. It is highly recommended to learn JavaScript development in 2021.

Going Further

The most important of the draggable attributes is the dataTransfer attribute, which can pass information along through a drag-and-drop operation. You can see in the code below that I set it with information about the dragged object’s original container:

static dragstart(e) {
    e.dataTransfer.setData('text', e.target.parentNode.id
}

And then use that information to rearrange a list later on:

static drop(e) {
  const div = e.dataTransfer.getData('text')
  const pointA = document.getElementById(div)
  const pointB = document.getElementById(e.target.parentNode.id)
  App.swapElements(pointA, pointB)
}

With the swapElements function being borrowed from here.

Please click 👏 button below a few times to show your support! ⬇⬇

Thanks! Don’t forget to follow Quick Code below.