Sortable and Collapsible Tree View Plugin For jQuery - Sortable Lists

Sortable and Collapsible Tree View Plugin For jQuery - Sortable Lists

A jQuery plugin that enables items in a list to be sorted vertically through drag and drop. Supports nested lists that allows to collapse / expand list items like a tree structure.

How to use it:

You can do this:

  • You can set placeholder css in init object through placeholderCss object - jQuery css object or placeholderClass.
  • You can set dragged element css through currElCss object or currElClass.
  • You can set hint css through hintCss object or hintClass.
  • You can set hintWrapper css throungh hintWrapperCss object or hintWrapperClass. Class will be removed after item will be inserted to the active area.
  • You can set base object css in init object through the baseCss object or baseClass.
  • You can set insert zone as a distance which determines if item wil be inserted inside or ouside of the active area by insertZone:50 property.
  • You can set speed of scrolling by scroll:10 property. Default is 20.
  • You can set isAllowed callback which determine if is possible to insert element in to the active area.

You should do this:

  • If you use css classes to formating ul/ols you should set the class used for ul/ol lists through listsClass:'className'. It is necessary for hintWrapper element which is created on the fly.

Do not do this:

  • Do not use list-style-type values different as none. It works also with type, but it is not recomended. You can use background image instead.
  • Do not format lists with # selector. Use classes or element selectors(ul{color:red}). It can cause problems with formating.
  • Do not use absolute positioning on the lists.
  • Do not experiment with body margin-top/left or padding-top/left. Script tries to solve it but i am not sure if it is 100% OK.
  • Do not use construction where ul with margin top is direct child of body - <body><ul style="margin-top:XYpx">. Margin-top breaks the position of dragged element.

Basic usage

1. Include the jQuery Sortable Lists plugin in your project and call the function on your nested html list.


2. Available options.

currElClass: '',
placeholderClass: '',
placeholderCss: {
  'position': 'relative',
  'padding': 0
hintClass: '',
hintCss: {
  'display': 'none',
  'position': 'relative',
  'padding': 0
hintWrapperClass: '',
hintWrapperCss: { /* Description is below the defaults in this var section */ },
baseClass: '',
baseCss: {
  'position': 'absolute',
  'top': 0 - parseInt(jQBody.css('margin-top')),
  'left': 0 - parseInt(jQBody.css('margin-left')),
  'margin': 0,
  'padding': 0,
  'z-index': 2500
opener: {
  active: false,
  open: '',
  close: '',
  openerCss: {
    'float': 'left',
    'display': 'inline-block',
    'background-position': 'center center',
    'background-repeat': 'no-repeat'
  openerClass: ''
listSelector: 'ul',
listsClass: '', // Used for hintWrapper and baseElement
listsCss: {},
insertZone: 50,
scroll: 20,
ignoreClass: '',
isAllowed: function(cEl, hint) { return true; }, // Params: current el., hint el.
onDragStart: function(e, cEl) { return true; }, // Params e jQ. event obj., current el.
onChange: function( cEl ) { return true; }, // Params: current el.
complete: function(cEl) { return true; } // Params: current el.

Change logs:


  • 1.3.2: Support for mobile devices in jquery-sortable-lists-mobile.js


  • 1.3.0: Added insertZonePlus option, fixed little bug with ol lists.


  • 1.2.0: Added option to opener. Now is possible to use html or class option.


  • v1.1.1: bugfixed


  • v1.1.0: Callback onChange has been implemented.


  • v1.0.14


  • Bug fix - empty ignoreClass causes an big issue.


  • Little bug fix


  • Little bug fix


  • sortableListsToString rewritten


  • Added features onStratDrag and ignoreClass. 
  • Fixed complete position in code.


  • Fixed opener.css + removed some js in index.html, improved toArray, toHierarchy functions.
  • toArray now returns array of objects and order param starts at 0 instead of 1. Also some redundant var declarations was removed.
  • Added mobile version.


  • Fixed bug in opener object


  • Fixed bug in open/close function


  • autoscroll completely rewriten, open/close functionality added to ul/ols.

This awesome jQuery plugin is developed by camohub. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 17.01.2018
  • Source