Git Product home page Git Product logo

nestedsortable's Introduction

NOTE: Please use the develop branch

Until further notice, the develop branch is to be considered the most stable and active one. I will only accept pull requests made on the develp branch.

nestedSortable jQuery plugin

nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.

Features

  • Designed to work seamlessly with the nested set model (have a look at the toArray method)
  • Items can be sorted in their own list, moved across the tree, or nested under other items.
  • Sublists are created and deleted on the fly
  • All jQuery Sortable options, events and methods are available
  • It is possible to define elements that will not accept a new nested item/list
  • It is possible to define a maximum depth for nested items

Usage

<ol class="sortable">
	<li><div>Some content</div></li>
	<li>
		<div>Some content</div>
		<ol>
			<li><div>Some sub-item content</div></li>
			<li><div>Some sub-item content</div></li>
		</ol>
	</li>
	<li><div>Some content</div></li>
</ol>

Please note: every <li> must have either one or two direct children, the first one being a container element (such as <div> in the above example), and the (optional) second one being the nested list. The container element has to be set as the 'toleranceElement' in the options, and this, or one of its children, as the 'handle'.

Custom Options

tabSize
How far right or left (in pixels) the item has to travel in order to be nested or to be sent outside its current list. Default: 20
disableNesting
The class name of the items that will not accept nested lists. Default: ui-nestedSortable-no-nesting
errorClass
The class given to the placeholder in case of error. Default: ui-nestedSortable-error
listType
The list type used (ordered or unordered). Default: ol
maxLevels
The maximum depth of nested items the list can accept. If set to '0' the levels are unlimited. Default: 0

Custom Methods

serialize
Serializes the nested list into a string like setName[item1Id]=parentId&setName[item2Id]=parentId, reading from each item's id formatted as 'setName_itemId' (where itemId is a number). It accepts the same options as the original Sortable method (key, attribute and expression).
toArray
Builds an array where each element is in the form:
setName[n] =>
{
	'item_id': itemId,
	'parent_id': parentId,
	'depth': depth,
	'left': left,
	'right': right,
}
It accepts the same options as the original Sortable method (attribute and expression) plus the custom startDepthCount, that sets the starting depth number (default is 0).
toHierarchy
Builds a hierarchical object in the form:
'0' ...
	'id' => itemId
'1' ...
	'id' => itemId
	'children' ...
		'0' ...
			'id' => itemId
		'1' ...
			'id' => itemId
'2' ...
	'id' => itemId
Similarly to toArray, it accepts attribute and expression options.

Known Bugs

nestedSortable doesn't work properly with connected draggables, because of the way Draggable simulates Sortable mouseStart and mouseStop events. This bug might or might not be fixed some time in the future (it's not specific to this plugin).

Requirements

jQuery 1.4+
jQuery UI Sortable 1.8+

Browser Compatibility

Tested with: IE 6/7/8, Firefox 3.6/4, Chrome, Safari 3

License

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

This work is pizzaware. If it saved your life, or you just feel good at heart, please consider offering me a pizza. This can be done in two ways: (1) use the Paypal button at the bottom of the project's home page; (2) send me cash via traditional mail to my home address in Italy. Is the second method legal? It is in Italy if you use Posta assicurata. You should check with your local laws if you live elsewhere.

nestedsortable's People

Contributors

bananattack avatar levacic avatar mjsarfatti avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.