Draaag

Feature

You can use Draaag to create draggable and sortble list easily
Browser support: desktop (IE8+) and touch device
Support vertical list and horizontal list
Also works for editable list
You can set the whole item draggable, or use a handle
Support dragover animation
No jQuery required

Getting Started

Set up your HTML markup.

Also your script:

      
        var el = document.getElementById('dragList');
        var dragList = new Draaag(el);

item1
item2
item3

You can set anything to the draggable item by giving it a classname "drag-item". If you don't like this name you can also change it in the config option.

Customization

Here is all the configuration options and their default value:

        
  var drag = new Draaag(list, {
           dragItemClass: 'drag-item',
           // classname of the draggable items

           chosenElClass: 'chosenEl',
           // classname of the current dragging item

           dragElClass: 'dragElClass',
           // classname of the appended ghost layer

           dragElId: 'dragElId',
           // id of the appended ghost layer

           handle: null,
           // if you want to use handle, set the classname of the handles here

           enableDrag: true,
           // if set to false, items are not draggable

           pointerX: 0,
           // the horizontal distance between the pointer and the ghost; px

           pointerY: 0,
           // the vertical distance between the pointer and the ghost; px

           ifHide: false,
           // whether to hide the original item when it is being dragged

           minMove: 3,
           // the drag sensitivity; px

           ifAnimated: false,
           // whether to enable dragover animation
           // * Not supported in IE9 and older version *

           aniDuration: 300,
           // duration of the dragover animation; ms

           // CALLBACKS
           onDrag: function(){},    // when drag starts
           onMove: function(){},    // while dragging
           onDrop: function(){},    // when drop
       });

Demos

Horizontal List

Using Handle & Animation

item 1

item 2

item 3

item 4

Callbacks

item 1
item 2
item 3

Status

Start pos:

Current pos:

Drop pos:

You can access to the status parameter by using draaag.state.[parameter]. Here are the parameters that it currently exposed:

direction{String}

The type of the list:
- vertical: default value;
- horizontal: if one or more of float, display: inline-block, display: inline is applied on the list, the list is considered to be a horizontal list.
itemCount{Number}

The number of the draggable items.
ifDragging{Boolean}

The value is set to True when start dragging, and False when the item is dropped.
innerX / innerY{Number}

The initial position of the mouse relative to the dragged item.
startX / startY{Number}

The position of the mouse relative to the viewport when you start dragging.
curX / curY{Number}

The position of the mouse relative to the viewport while dragging.
dropX / dropY{Number}

The position of the mouse relative to the viewport when you drop the dragged item.

Methods

enableDrag()

Enable the drag feature.
disableDrag()

Disable the drag feature. Items become undraggable.
update()

Update the state of the list. This method is useful if you want a dynamic list. Call this function whenever you add a new item to the list.

item 1
item 2
item 3