Skip to content
Use native drag and drop APIs to provide sortable items. No dependancies.
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.
test
.gitignore
.travis.yml
Gruntfile.js
LICENSE
README.md
bower.json
index.html
nativesortable.js
package.json

README.md

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)
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.