Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mjsarfatti/nestedSortable

A jQuery plugin that extends Sortable UI functionalities to nested lists.
https://github.com/mjsarfatti/nestedSortable

Last synced: 13 days ago
JSON representation

A jQuery plugin that extends Sortable UI functionalities to nested lists.

Host: GitHub
URL: https://github.com/mjsarfatti/nestedSortable
Owner: mjsarfatti
Created: 2011-04-26T14:23:10.000Z (over 13 years ago)
Default Branch: master
Last Pushed: 2018-06-13T07:51:52.000Z (over 6 years ago)
Last Synced: 2024-10-12T02:53:09.260Z (about 1 month ago)
Language: JavaScript
Homepage: http://mjsarfatti.com/sandbox/nestedSortable
Size: 598 KB
Stars: 881
Watchers: 74
Forks: 533
Open Issues: 29
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 29 July 2014

**nestedSortable is currently maintained at [ilikenwf/nestedSortable](https://github.com/ilikenwf/nestedSortable). Please [go there](https://github.com/ilikenwf/nestedSortable).**

**~~DEVELOPER NEEDED~~**  

**~~I'm sorry to say that I am not able to keep the pace developing this project anymore. I know how much nestedSortable is important for web applications, and I still can't understand why it's not part of jQuery-UI. I also think the base of the plugin is very strong, and deserves much more attention and involvement. If anybody is willing to take this project, please say so [here](https://github.com/mjsarfatti/nestedSortable/issues/95).~~**  

**~~Thank you.~~**

# nestedSortable jQuery plugin

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

*Note:* **Version 2.0** *is published in branch '2.0alpha' and is ready for testing! At the moment it has only been tested in Firefox and Chrome, if you work with IE feel free to give it a shot and let me know if something goes wrong.*

## Features

- Designed to work seamlessly with the [nested](http://articles.sitepoint.com/article/hierarchical-data-database "A Sitepoint tutorial on PHP, MYSQL and nested sets") [set](http://en.wikipedia.org/wiki/Nested_set_model "Wikipedia article on nested sets") 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 and a maximum depth for nested items

- The root level can be protected

## Usage

```



	Some content

	

		Some content

		

			Some sub-item content

			Some sub-item content

		

	

	Some content



```

```

	$(document).ready(function(){

		$('.sortable').nestedSortable({

			handle: 'div',

			items: 'li',

			toleranceElement: '> div'

		});

	});

```

Please note: every `
` must have either one or two direct children, the first one being a container element (such as `` 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'.

Also, the default list type is `
`.

## 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



	protectRoot

	Wether to protect the root level (i.e. root items can be sorted but not nested, sub-items cannot become root items). Default: false



	rootID

	The id given to the root element (set this to whatever suits your data structure). Default: null



	rtl

	Set this to true if you have a right-to-left page. Default: false



	isAllowed (function)

	You can specify a custom function to verify if a drop location is allowed. Default: function(item, parent) { return true; }





## 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 the MIT 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) follow [this link](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=RSJEW3N9PRMYY&lc=IT&item_name=Manuele%20Sarfatti&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) to donate through paypal; (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.