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 y–axis. You can add grid movements to the element you want to move and much more to have fun with.
Here’s,
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:
|
1 |
<script src="js/draggabilly.pkgd.min.js" type="text/javascript"></script> |
OR
You can also use the CDN of the jquery plugin in the <head> section of your website.
Draggabilly.js CDN:
|
1 2 3 |
<!-- or --> |
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.
|
1 2 3 4 |
var elem = document.querySelector('#idHere'); var draggie = new Draggabilly( elem, { // options... }); |
Let’s take a sample ID for an element so as to make it draggable, named “custom”.
|
1 2 |
<h1>Draggabilly .js – Tuluzz.com</h1> <div id=”demo”>Tuluzz</div> |
Now put the ID in the ID section of the javascript code, here’s how:
Draggabilly – with vanilla JS
|
1 2 |
var elem = document.querySelector('#demo); var draggie = new Draggabilly( ‘#demo ‘); |
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:
|
1 2 3 |
var draggie = new Draggabilly('#demo', { axis: 'x' }); |
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:
|
1 2 3 |
var draggie = new Draggabilly('#demo', { containment: '.container' }); |
Draggabilly – with jQuery
If you want to make a grid of the element then:
The JavaScript Code:
|
1 2 3 4 5 |
$(document).ready( function() { var $draggable = $('#demo).draggabilly({ grid:[ 20, 20 ] }); }) |
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.
|
1 2 3 4 |
<h1>Draggabilly .js – Tuluzz.com</h1> <div id=”demo”></div> <div class="handle"></div> </div> |
The JavaScript Code:
|
1 2 3 4 5 |
$(document).ready( function() { var $draggable = $('#demo).draggabilly({ handle: '.handle' }); }); |
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.
