Sortable and Collapsible Tree View Plugin For jQuery - Sortable Lists

Sortable and Collapsible Tree View Plugin For jQuery - Sortable Lists
File Size: 25.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

$('#selector').sortableLists(options);

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,
insertZonePlus: false,
scroll: 20,
ignoreClass: '',
isAllowed: function( cEl, hint, target ) { 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:

2018-01-17

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

2016-02-05

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

2016-02-02

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

2016-01-27

  • v1.1.1: bugfixed

2015-11-21

  • v1.1.0: Callback onChange has been implemented.

2015-11-03

  • v1.0.14

2015-09-28

  • Bug fix - empty ignoreClass causes an big issue.

2015-09-24

  • Little bug fix

2015-08-29

  • Little bug fix

2015-07-28

  • sortableListsToString rewritten

2015-06-11

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

2015-06-10

  • 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.

2015-05-31

  • Fixed bug in opener object

2015-05-27

  • Fixed bug in open/close function

2015-05-22

  • 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.