Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

An implementation of HTML5 Drag and Drop API to provide a sortable list of items.

No external dependancies.

See demo here: http://bgrins.github.com/nativesortable/

Usage

var list = document.getElementById("list");
nativesortable(list, {
  change: function(parent, elem) {
    // ...
  },
  childClass: "sortable-child",
  draggingClass: "sortable-dragging",
  overClass: "sortable-over"
});

Package Management

bower install nativesortable
- or -
npm install nativesortable

Extra CSS

I would also recommend adding the following CSS:

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
[draggable] * {
  -moz-user-drag: none;
  -khtml-user-drag: none;
  -webkit-user-drag: none;
  user-drag: none;
}

This makes sure that

  • Text does not get highlighted while dragging
  • That native draggable elements (like img and a tags)

About

Use native drag and drop APIs to provide sortable items. No dependancies.

Resources

License

Packages

No packages published