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.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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

  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;
position: absolute;
z-index: 10000; /* make sure element is at the top of other elements */
You can’t perform that action at this time.