{"id":20819897,"url":"https://github.com/ahamed/treesortable","last_synced_at":"2025-05-07T15:24:01.962Z","repository":{"id":38826206,"uuid":"327515301","full_name":"ahamed/treeSortable","owner":"ahamed","description":"This is a jquery ui sortable helper plugin for handy tree type structure sotable.","archived":false,"fork":false,"pushed_at":"2022-10-10T15:09:10.000Z","size":1789,"stargazers_count":24,"open_issues_count":5,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T11:22:38.741Z","etag":null,"topics":["jquery","jqueryui","sortable"],"latest_commit_sha":null,"homepage":"https://ahamed.github.io/treeSortable","language":"JavaScript","has_issues":true,"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/ahamed.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":"2021-01-07T05:44:50.000Z","updated_at":"2025-02-22T23:43:34.000Z","dependencies_parsed_at":"2023-01-19T16:33:31.625Z","dependency_job_id":null,"html_url":"https://github.com/ahamed/treeSortable","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/ahamed%2FtreeSortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahamed%2FtreeSortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahamed%2FtreeSortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahamed%2FtreeSortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahamed","download_url":"https://codeload.github.com/ahamed/treeSortable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252903542,"owners_count":21822464,"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":["jquery","jqueryui","sortable"],"created_at":"2024-11-17T22:07:46.358Z","updated_at":"2025-05-07T15:24:01.927Z","avatar_url":"https://github.com/ahamed.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tree Sortable\nA drag and drop list item sorting and level changing library. \n\n![treeSortableBanner](https://user-images.githubusercontent.com/5783354/163663867-9a404565-1550-4eac-afb7-a1f50fddd7c8.gif)\n\n## Motivation\nThe `jQuery-ui's` sortable plugin allows us to sort items vertically or horizontally. But sometimes we need some items to make a child of another item and also need to sort a parent with all of the children items.\nThis is the reason why I've created this library for managing the parent-children relationship of list items and fully by drag and drop.\n\n## Installation\nDownload the required files from the [Github](https://github.com/ahamed/treeSortable/archive/refs/heads/master.zip). Use the `treeSortable.js` and `treeSortable.css` files to your project.\nYou also need to use `jQuery` and `jQuery-ui` libraries.\n\nIn the `\u003chead\u003e` tag use the css files.\n```html\n\u003clink href=\"https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003clink href=\"/path/to/treeSortable.css\" rel=\"stylesheet\" /\u003e\n```\n\nBefore the `\u003c/body\u003e` tag\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.1.0.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/treeSortable.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Usage\nCreate a `ul` element with some ID attribute.\n\n```html\n\u003cul id=\"tree\"\u003e\u003c/ul\u003e\n```\n\nThen generate an array of object with the exact structure defined below.\nIn the data structure the ordering is important, the tree will be rendered according to this order.\n\n```js\nconst data = [\n\t{\n\t\tid: 1,\n\t\tlevel: 1,\n\t\tparent_id: 0,\n\t\ttitle: 'Branch 1'\n\t},\n\t{\n\t\tid: 2,\n\t\tlevel: 2,\n\t\tparent_id: 1,\n\t\ttitle: 'Branch 2'\n\t},\n\t.\n\t.\n\t.\n]\n```\n\nNow we are gonna create an instance of the tree sortable. And we can pass an options object as the constructor of the `TreeSortable`.\n\n\n```js\nconst sortable = new TreeSortable({\n\ttreeSelector: '#tree'\n});\n```\n\nNow create the HTML content of the tree from the `data` we've declared earlier, and append the `$content` to the `\u003cul\u003e` element.\n```js\nconst $content = data.map(sortable.createBranch);\n$('#tree').html($content);\n```\n\nFinally, run the sortable for making it interactive.\n\n```js\nsortable.run();\n```\n\n## Change sortable options\nYou can pass customized options to the sortable while instantiating the function. All the options has the default values.\n\n## Options\n| Option | Default | Description |\n|--------| --------| ------------|\n| treeSortable | #tree | The tree root ID selector. If you change the root selector then you have to update the CSS as per requirements.|\n| branchSelector | .tree-branch | The tree branch class selector. This need to be applied at the `li` element of the tree.|\n|branchPathSelector| .branch-path | The left side path indication element's class selector. |\n|dragHandlerSelector| .branch-drag-handler| The drag element. This element is responsible for enabling the dragging features of the branch.|\n|placeholderName| sortable-placeholder | The placeholder name. This is for jquery-ui sortable. Note that there is no dot(.) or hash(#). See the jquery-ui sortable library.|\n|childrenBusSelector| .children-bus| The children bus selector. This element is responsible for carrying the children on sorting a parent element.|\n|levelPrefix| branch-level| This prefix is added to the `li` element and create a level class. For example, for the level 1 branch the class would be `.branch-level-1`|\n|maxLevel| 10 | The maximum level the tree could go. For example, if you set the `maxLevel` to `2` then the branch could have maximum `.branch-level-2`.|\n|depth| 30 | The Depth of a child branch. If you change the depth then you have to update the CSS of the `.branch-level-X` classes. See the `treeSortable.css` for more references.|\n\n\nFor updating the options you could do-\n```js\nconst sortable = new TreeSortable({\n\ttreeSelector: '#someUlId',\n\tbranchSelector: '.some-branch-class-name',\n\tdepth: 20,\n\t...\n})\n```\n\n\u003eNote: If you change the class selectors like `branchSelector`, `branchPathSelector` etc then you have to take care of the CSS design accordingly.\n\n\n## Event\nAfter each reorder or level change an event is fired for further operations.\n```js\nsortable.onSortCompleted(function(event, ui) {\n\t// here the `event` is the sortable event.\n\t// The `ui` is the jquery-ui's ui object.\n\t// You can use the `ui.item`, `ui.helper` and so on.\n\t// See https://api.jqueryui.com/sortable/\n});\n```\n\nYou can perform async operations here as well. make the callback function asynchronous in that case.\n\n```js\nsortable.onSortCompleted(async function(event, ui) {\n\tawait updateDatabaseAsync();\n});\n```\n\n## Add child, Add sibling, delete branch.\nThere are some functions provided to the library for adding child branch, sibling branch or delete branches recursively.\nThe `sortable` instance provides you an event listener that gives you the ability to attach any event listener for a specific instance.\nThis is basically a wrapper function of the original jQuery's event listener but this is more `TreeSortable` instance specific.\n\n\n\n```js\nsortable.addListener('click', '.add-child', function (event, instance) {\n\tevent.preventDefault();\n\tinstance.addChildBranch($(event.target));\n});\n```\n\nFor adding sibling-\n\n```js\nsortable.addListener('click', '.add-child', function (event, instance) {\n\tevent.preventDefault();\n\tinstance.addSiblingBranch($(event.target));\n});\n```\n\nFor deleting branch-\n\n```js\nsortable.addListener('click', '.remove-branch', function (event, instance) {\n\tevent.preventDefault();\n\n\tconst confirm = window.confirm('Are you sure you want to delete this branch?');\n\tif (!confirm) {\n\t\t\treturn;\n\t}\n\tinstance.removeBranch($(this));\n});\n```\n\n## Contribution\nIf you find any issues please raise issue on github. Also if you want to contribute the plugin then create a PR.\nThis library is fully functional if your data structure satisfied the described situation. But this may not be perfect for some other situation.\nIf you need any customization then ping me on `sajeeb07ahamed@gmail.com`.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahamed%2Ftreesortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahamed%2Ftreesortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahamed%2Ftreesortable/lists"}