Draggabilly.js – Enable Dragging of Elements on your Website

Dragging elements from one place to another makes building blocks easy and convenient, the dragging feature can easily be achieved by using JavaScript/Jquery but sometimes it becomes a bit tough for newbies.

Draggabilly.js – A lightweight JavaScript library for dragging and dropping elements from one place to another. Draggabilly.js is really an exciting tool that gives you the opportunity for advanced customization in making an element draggable as per your choice.

With Draggabilly.js you can enable movement of an element either to the x or yaxis. You can add grid movements to the element you want to move and much more to have fun with.



How to use Draggabilly.js?

If you are looking out to use the drag and drop jquery plugin then let’s get started.

Step 1: Download the Draggabilly.js file from Github and host it on your server.

Step 2: Now include the source file into the <head> section with the following command:


You can also use the CDN of the jquery plugin in the <head> section of your website.

Draggabilly.js CDN:

That’s it you have now integrated Draggabilly.js in your website.

Now let’s play with some JavaScript coding to make things happen for you.

The Draggabilly syntax to be included in the web page for the proper working of Draggabilly.

Let’s take a sample ID for an element so as to make it draggable, named “custom”.

Now put the ID in the ID section of the javascript code, here’s how:

Draggabilly – with vanilla JS

This will add the functionality of dragging in the element with ID – custom.

Recommended Readings:

Draggabilly.js Classes:

.is-pointer-down: This class is used when the user’s pointer (mouse, touch, pointer) first presses down.
.is-dragging: This class is used when elements start to drag.

Draggabilly.js Options

If you want to move the element only in the ‘x’ direction then you can use do like this:

If you want to check the demo of the above code you can find it here.

Now if you want to move an element in the predefined container then you can do like this:

Draggabilly – with jQuery

If you want to make a grid of the element then:

The JavaScript Code:

If you want an option to handle the element then you can specify the particular element and then the drag interaction starts.

You just have to give two background-color to both the element, the #demo element and also the .handle element.

The JavaScript Code:

These were some of the basic and very simple customization that were done to give a basic demo if you are interested in doing more in this sector, just visit the official website of the Draggabilly.js plugin and you can learn more about Events, dragStart, dragMove, dragEnd, pointerDown and much more.

This was Draggabilly.js which can provide you with options to drag and drop elements on your website.

(Visited 240 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply