Skip to content
A very short library (2kb) for making objects draggable
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
imgs
scripts
LICENSE
README.md
_config.yml
index.html

README.md

draggable.js

A very short library (2kb) for making objects draggable. And it is very is to use. This library is initially developed for CodeDoubt. You can see it live at Draggable.

Step #1

add the library to your project

<script src="scripts/draggable.min.js"></script>

Step #2

draggable(idOfElement,{}); // by default it is draggable  to the whole document

you can also set the bound of the element to a parent element

draggable(idOfElement,{
  bound: true,
  boundTo: '#id' // just id of the  element you can see the use on site
});

if you want to attach this draggable object to its parent you can set the arguments as below

 draggable(idOfElement, {
      attach: true,
      attachTo: '#picker',
  });  

if you want to disable drag in specific direction

draggable(idOfElement, {
    dragY: false /// dragX for x direction
});

setting offsetProperties

draggable(idOfElement, {
    offLeft: -11, //setting left offset of the element
    offTop: 100 // setting top offset of the element
    //do not add px to the value
});

adding a callback function to the dragged element

draggable(idOfElement, {
 onmove: function(){
 //new condition or statements
 }
});

Tip 🎅💡

make element position: absolute and its parent element position: relative

#parentElement{ /* only if your are using attachTo property */
position: absolute;
}
#element{
position: absolute;
z-index: 10000; /* make sure element is at the top of other elements */
}
You can’t perform that action at this time.