{"id":20075019,"url":"https://github.com/sortablejs/meteor-sortablejs","last_synced_at":"2025-08-08T04:11:24.036Z","repository":{"id":66016843,"uuid":"51165654","full_name":"SortableJS/meteor-sortablejs","owner":"SortableJS","description":"Reactive reorderable lists.","archived":false,"fork":false,"pushed_at":"2016-02-05T18:48:07.000Z","size":19,"stargazers_count":20,"open_issues_count":12,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-09T04:41:56.929Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://rubaxa-sortable.meteor.com","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/SortableJS.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":"2016-02-05T18:25:48.000Z","updated_at":"2024-10-01T01:24:48.000Z","dependencies_parsed_at":"2023-04-27T21:42:59.694Z","dependency_job_id":null,"html_url":"https://github.com/SortableJS/meteor-sortablejs","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/SortableJS%2Fmeteor-sortablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Fmeteor-sortablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Fmeteor-sortablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Fmeteor-sortablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SortableJS","download_url":"https://codeload.github.com/SortableJS/meteor-sortablejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252580114,"owners_count":21771265,"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-11-13T14:57:16.127Z","updated_at":"2025-05-05T21:32:48.482Z","avatar_url":"https://github.com/SortableJS.png","language":"JavaScript","readme":"Reactive reorderable lists with [Sortable](http://rubaxa.github.io/Sortable/),\nbacked by [Meteor.js](http://meteor.com) collections:\n\n* new elements arriving in the collection will update the list as you expect\n* elements removed from the collection will be removed from the list\n* drag and drop between lists updates collections accordingly\n\nDemo: http://rubaxa-sortable.meteor.com\n\n# Issues\n\n\u003cb\u003eTHIS PROJECT NEEDS A MAINTAINER.\u003c/b\u003e\u003cbr/\u003e\n\u003cs\u003eIf you encounter an issue while using this package, please CC @dandv when you file it in this repo.\u003c/s\u003e\n\n\n# Meteor\n\nIf you're new to Meteor, here's what the excitement is all about -\n[watch the first two minutes](https://www.youtube.com/watch?v=fsi0aJ9yr2o); you'll be hooked by 1:28.\nThat screencast is from 2012. In the meantime, Meteor has become a mature JavaScript-everywhere web\ndevelopment framework. Read more at [Why Meteor](http://wiki.dandascalescu.com/essays/why_meteor).\n\n\n# Usage\n\nSimplest invocation - order will be lost when the page is refreshed:\n\n```handlebars\n{{#sortable \u003ccollection|cursor|array\u003e}}\n```\n\nPersist the sort order in the 'order' field of each document in the collection:\n\n*Client:*\n\n```handlebars\n{{#sortable items=\u003ccollection|cursor|array\u003e sortField=\"order\"}}\n```\n\n*Server:*\n\n```js\nSortable.collections = \u003ccollectionName\u003e;  // the name, not the variable\n```\n\nAlong with `items`, `sortField` is the only Meteor-specific option. If it's missing, the package will\nassume there is a field called \"order\" in the collection, holding unique `Number`s such that every\n`order` differs from that before and after it by at least 1. Basically, keep to 0, 1, 2, ... .\nTry not to depend on a particular format for this field; it *is* though guaranteed that a `sort` will\nproduce lexicographical order, and that the order will be maintained after an arbitrary number of\nreorderings, unlike with [naive solutions](http://programmers.stackexchange.com/questions/266451/maintain-ordered-collection-by-updating-as-few-order-fields-as-possible).\n\nRemember to declare on the server which collections you want to be reorderable from the client.\nOtherwise, the library will error because the client would be able to modify numerical fields in\nany collection, which represents a security risk.\n\n\n## Passing options to the Sortable library\n\n    {{#sortable items=\u003ccollection|cursor|array\u003e option1=value1 option2=value2...}}\n    {{#sortable items=\u003ccollection|cursor|array\u003e options=myOptions}}\n\nFor available options, please refer to [the main README](../README.md#options). You can pass them directly\nor under the `options` object. Direct options (`key=value`) override those in `options`. It is best\nto pass presentation-related options directly, and functionality-related settings in an `options`\nobject, as this will enable designers to work without needing to inspect the JavaScript code:\n\n    \u003ctemplate name=\"myTemplate\"\u003e\n      ...\n      {{#sortable items=Players handle=\".sortable-handle\" ghostClass=\"sortable-ghost\" options=playerOptions}}\n    \u003c/template\u003e\n\nDefine the options in a helper for the template that calls Sortable:\n\n```js\nTemplate.myTemplate.helpers({\n    playerOptions: function () {\n        return {\n            group: {\n                name: \"league\",\n                pull: true,\n                put: false\n            },\n            sort: false\n        };\n    }\n});\n```\n\n#### Meteor-specific options\n\n* `selector` - you can specify a collection selector if your list operates only on a subset of the collection. Example:\n\n```js\nTemplate.myTemplate.helpers({\n   playerOptions: function() {\n      return {\n         selector: { city: 'San Francisco' }\n      }\n   }\n});\n```\n\n\n## Events\n\nAll the original Sortable events are supported. In addition, they will receive\nthe data context in `event.data`. You can access `event.data.order` this way:\n\n```handlebars\n{{#sortable items=players options=playersOptions}}\n```\n\n```js\nTemplate.myTemplate.helpers({\n    playersOptions: function () {\n        return {\n            onSort: function(/**Event*/event) {\n                console.log('Moved player #%d from %d to %d',\n                    event.data.order, event.oldIndex, event.newIndex\n                );\n            }\n        };\n    }\n});\n```\n\n\n# TODO\n\n* Array support\n* Tests\n* Misc. - see reactivize.js\n* [GitHub issues](https://github.com/RubaXa/Sortable/labels/%E2%98%84%20meteor)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsortablejs%2Fmeteor-sortablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsortablejs%2Fmeteor-sortablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsortablejs%2Fmeteor-sortablejs/lists"}