{"id":13493268,"url":"https://github.com/dbushell/Nestable","last_synced_at":"2025-03-28T11:32:15.480Z","repository":{"id":3577539,"uuid":"4640263","full_name":"dbushell/Nestable","owner":"dbushell","description":"Drag \u0026 drop hierarchical list with mouse and touch compatibility (jQuery plugin)","archived":true,"fork":false,"pushed_at":"2019-03-10T16:43:38.000Z","size":71,"stargazers_count":2474,"open_issues_count":166,"forks_count":990,"subscribers_count":118,"default_branch":"master","last_synced_at":"2024-10-14T06:34:37.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dbushell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-06-12T17:06:29.000Z","updated_at":"2024-10-01T12:22:01.000Z","dependencies_parsed_at":"2022-08-30T22:12:10.778Z","dependency_job_id":null,"html_url":"https://github.com/dbushell/Nestable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbushell%2FNestable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbushell%2FNestable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbushell%2FNestable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbushell%2FNestable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbushell","download_url":"https://codeload.github.com/dbushell/Nestable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222376246,"owners_count":16974312,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:13.704Z","updated_at":"2024-10-31T07:31:22.828Z","avatar_url":"https://github.com/dbushell.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Nestable\n========\n\n## PLEASE NOTE\n\n**I cannot provide any support or guidance beyond this README. If this code helps you that's great but I have no plans to develop Nestable beyond this demo (it's not a final product and has limited functionality). I cannot reply to any requests for help.**\n\n* * *\n\n### Drag \u0026 drop hierarchical list with mouse and touch compatibility (jQuery / Zepto plugin)\n\n[**Try Nestable Demo**](http://dbushell.github.com/Nestable/)\n\nNestable is an experimental example and not under active development. If it suits your requirements feel free to expand upon it!\n\n## Usage\n\nWrite your nested HTML lists like so:\n\n    \u003cdiv class=\"dd\"\u003e\n        \u003col class=\"dd-list\"\u003e\n            \u003cli class=\"dd-item\" data-id=\"1\"\u003e\n                \u003cdiv class=\"dd-handle\"\u003eItem 1\u003c/div\u003e\n            \u003c/li\u003e\n            \u003cli class=\"dd-item\" data-id=\"2\"\u003e\n                \u003cdiv class=\"dd-handle\"\u003eItem 2\u003c/div\u003e\n            \u003c/li\u003e\n            \u003cli class=\"dd-item\" data-id=\"3\"\u003e\n                \u003cdiv class=\"dd-handle\"\u003eItem 3\u003c/div\u003e\n                \u003col class=\"dd-list\"\u003e\n                    \u003cli class=\"dd-item\" data-id=\"4\"\u003e\n                        \u003cdiv class=\"dd-handle\"\u003eItem 4\u003c/div\u003e\n                    \u003c/li\u003e\n                    \u003cli class=\"dd-item\" data-id=\"5\"\u003e\n                        \u003cdiv class=\"dd-handle\"\u003eItem 5\u003c/div\u003e\n                    \u003c/li\u003e\n                \u003c/ol\u003e\n            \u003c/li\u003e\n        \u003c/ol\u003e\n    \u003c/div\u003e\n\nThen activate with jQuery like so:\n\n    $('.dd').nestable({ /* config options */ });\n\n### Events\n\nThe `change` event is fired when items are reordered.\n\n    $('.dd').on('change', function() {\n        /* on change event */\n    });\n\n### Methods\n\nYou can get a serialised object with all `data-*` attributes for each item.\n\n    $('.dd').nestable('serialize');\n\nThe serialised JSON for the example above would be:\n\n    [{\"id\":1},{\"id\":2},{\"id\":3,\"children\":[{\"id\":4},{\"id\":5}]}]\n\n### Configuration\n\nYou can change the follow options:\n\n* `maxDepth` number of levels an item can be nested (default `5`)\n* `group` group ID to allow dragging between lists (default `0`)\n\nThese advanced config options are also available:\n\n* `listNodeName` The HTML element to create for lists (default `'ol'`)\n* `itemNodeName` The HTML element to create for list items (default `'li'`)\n* `rootClass` The class of the root element `.nestable()` was used on (default `'dd'`)\n* `listClass` The class of all list elements (default `'dd-list'`)\n* `itemClass` The class of all list item elements (default `'dd-item'`)\n* `dragClass` The class applied to the list element that is being dragged (default `'dd-dragel'`)\n* `handleClass` The class of the content element inside each list item (default `'dd-handle'`)\n* `collapsedClass` The class applied to lists that have been collapsed (default `'dd-collapsed'`)\n* `placeClass` The class of the placeholder element (default `'dd-placeholder'`)\n* `emptyClass` The class used for empty list placeholder elements (default `'dd-empty'`)\n* `expandBtnHTML` The HTML text used to generate a list item expand button (default `'\u003cbutton data-action=\"expand\"\u003eExpand\u003e\u003c/button\u003e'`)\n* `collapseBtnHTML` The HTML text used to generate a list item collapse button (default `'\u003cbutton data-action=\"collapse\"\u003eCollapse\u003c/button\u003e'`)\n\n**Inspect the [Nestable Demo](http://dbushell.github.com/Nestable/) for guidance.**\n\n## Change Log\n\n### 15th October 2012\n\n* Merge for Zepto.js support\n* Merge fix for remove/detach items\n\n### 27th June 2012\n\n* Added `maxDepth` option (default to 5)\n* Added empty placeholder\n* Updated CSS class structure with options for `listClass` and `itemClass`.\n* Fixed to allow drag and drop between multiple Nestable instances (off by default).\n* Added `group` option to enabled the above.\n\n* * *\n\nAuthor: David Bushell [http://dbushell.com](http://dbushell.com/) [@dbushell](http://twitter.com/dbushell/)\n\nCopyright © 2012 David Bushell | BSD \u0026 MIT license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbushell%2FNestable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbushell%2FNestable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbushell%2FNestable/lists"}