Make Elements On Your Site Draggable With Draggabilly.js

By Irfan. in Web Design. Updated on April 4, 2025.

Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we have mentioned it several times, but we have not actually dug into what Modernizr is.

So, in this post we will specifically discuss this JavaScript Library.

Getting Started with Twitter Bootstrap

Building a website from the ground up is very hard. Even some people who are able to code... Read more

What is it?

First of all, let’s get the essential question answered: what is Modernizr?

Based on the official site, Modernizr is “A JavaScript library that detects HTML5 and CSS3 features in the user’s browser.”

Although HTML5 and CSS3 are great but many of the new features they have, as we already know by now, are not much applicable in old browsers.

Modernizr helps to address this problem by testing the user’s browser on whether it supports a particular feature. If the feature is “unsupported”, then we can deliver an appropriate script or function to imitate the feature it lacks.

Recommended Reading: What Modernizr doesn’t do?

Setting-up Modernizr

At the Modernizr official website, we will find two options to download the file, Development and Production version.

The Development version is a full and uncompressed version consisting of all the primary feature tests; while in the Production version, we can select the feature tests that we only need.

As you can see, there are a lot of options for feature tests in the download page. In this example, we will select all the primary feature tests. Generate and grab the codes. Then, insert the file inside the <head> section.

There’s a lot of tutorials out there on how to make things draggable in a web page. jQuery is one of the easiest ways. You don’t even need the jQuery UI, just a little help from the mouse direction function and perhaps some optional handling. But what if you don’t want to touch any jQuery code yet still want to make things draggable? Then, draggabilly.js is the right tool for you.

With Draggabilly.js, you can make any element on a web page draggable. You can customize the behavior of the draggable element like adding grid movement, binding event listeners to events, limiting the movements to only the x- or y-axis and much more. It also supports various browsers, IE8+ and even multi-touch mobile browsers.

Create a Swipe-Enabled Slider with jQuery (Step-by-Step Guide)

Image/Content Slider is one of the common components we find in a website. It is quite simple to... Read more

Getting Started

To get started, you only need to include the Draggabilly.js source to your site. There isn’t a need for other dependencies. You can grab the file from GitHub.

<script src="js/draggabilly.pkgd.min.js" type="text/javascript"></script>

As for the rest, you’ll be working with some JavaScript functions as per below.

Basic Dragging

You need to include the following snippet in your page so that the dragging can work.

var elem = document.querySelector('#idHere');
var draggie = new Draggabilly(elem, {
  // options...
});

The #idHere is the id you should put inside the HTML element you want to make draggable. While in the draggie variable, you can put in an option if you’d like. If you don’t need to have that option, you can also define the id from the elem variable.

For instance, if I have an id of #demo without any option, then I can write the snippet like so:

var elem = document.querySelector('#demo');
var draggie = new Draggabilly('#demo');

Then inside the HTML, call the id of the element you wish to turn draggable. The following is a basic example.

<div class="demo-frame">
  <div class="justDemo">
    <div id="demo" class="relative">
      <div class="centered">Drag me</div>
    </div>
  </div>
</div>

There are many other ways to affect Draggabilly’s behavior. You can restrict the dragging to be only in the ‘y’ or ‘x’ axis like so:

new Draggabilly('#demo', {
  axis: 'x'
});

Or you can add a handling option, which will specify the starting element of the drag interaction like so:

var elem = document.querySelector('#demo');
new Draggabilly(elem, {
  handle: '.handle'
});

This .handle option is useful when all inner elements like inputs and forms don’t need to be draggable. There are still many other options you can add like containments, grids, methods, and events. Head over to Draggabilly’s official homepage to see the full documentation.

Final Thought

The dragging feature, in most cases, has little effect on web design but it’s still pretty important. It takes place most often in web apps or games. The simplicity of its installation and the variety of different dragging methods makes this a really handy tool to try out.