Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

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

branch: master
Octocat-spinner-32 test point to qunit.css February 28, 2014
Octocat-spinner-32 .gitignore update gitignore February 26, 2014
Octocat-spinner-32 .travis.yml add travis file February 26, 2014
Octocat-spinner-32 Gruntfile.js add basic test February 26, 2014
Octocat-spinner-32 LICENSE add license. closes Issue #5 February 14, 2014
Octocat-spinner-32 README.md update readme February 26, 2014
Octocat-spinner-32 bower.json prep for 0.0.1 February 26, 2014
Octocat-spinner-32 index.html trailing spaces September 04, 2013
Octocat-spinner-32 nativesortable.js prep for 0.0.1 February 26, 2014
Octocat-spinner-32 package.json prep for 0.0.1 February 26, 2014
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: onchange });

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)
Something went wrong with that request. Please try again.