{"id":15015887,"url":"https://github.com/adopted-ember-addons/ember-sortable","last_synced_at":"2026-02-14T03:19:12.677Z","repository":{"id":30900544,"uuid":"34458322","full_name":"adopted-ember-addons/ember-sortable","owner":"adopted-ember-addons","description":"Sortable UI primitives for Ember.js","archived":false,"fork":false,"pushed_at":"2026-02-12T22:45:36.000Z","size":7680,"stargazers_count":298,"open_issues_count":50,"forks_count":159,"subscribers_count":16,"default_branch":"master","last_synced_at":"2026-02-13T07:49:23.022Z","etag":null,"topics":["emberjs"],"latest_commit_sha":null,"homepage":"https://ember-sortable.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adopted-ember-addons.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-04-23T13:36:47.000Z","updated_at":"2026-02-12T22:45:08.000Z","dependencies_parsed_at":"2023-02-15T19:45:54.330Z","dependency_job_id":"bd1a95f1-e52b-4310-873f-5b518aceaacc","html_url":"https://github.com/adopted-ember-addons/ember-sortable","commit_stats":{"total_commits":589,"total_committers":95,"mean_commits":6.2,"dds":0.7436332767402377,"last_synced_commit":"95c16c7ba7ac9bd717e15da1dd5c781a2d92a5a3"},"previous_names":["jgwhite/ember-sortable","heroku/ember-sortable"],"tags_count":96,"template":false,"template_full_name":null,"purl":"pkg:github/adopted-ember-addons/ember-sortable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adopted-ember-addons","download_url":"https://codeload.github.com/adopted-ember-addons/ember-sortable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adopted-ember-addons%2Fember-sortable/sbom","scorecard":{"id":167523,"data":{"date":"2025-08-11","repo":{"name":"github.com/adopted-ember-addons/ember-sortable","commit":"22b827abbe3d443e9dd8afc15a9e563e4b1da7d3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":2,"reason":"Found 5/17 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"20 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: jobLevel 'contents' permission set to 'write': .github/workflows/plan-release.yml:40","Info: jobLevel 'issues' permission set to 'read': .github/workflows/plan-release.yml:41","Warn: jobLevel 'contents' permission set to 'write': .github/workflows/publish.yml:24","Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/plan-release.yml:1","Warn: no topLevel permission defined: .github/workflows/publish.yml:1"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/plan-release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/plan-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/plan-release.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/plan-release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/plan-release.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/plan-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/plan-release.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/plan-release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/plan-release.yml:83: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/plan-release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/publish.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/publish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/adopted-ember-addons/ember-sortable/publish.yml/master?enable=pin","Info:   0 out of  10 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   8 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/publish.yml:20"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"13 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T15:19:43.741Z","repository_id":30900544,"created_at":"2025-08-16T15:19:43.741Z","updated_at":"2025-08-16T15:19:43.741Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29433304,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T02:20:56.896Z","status":"ssl_error","status_checked_at":"2026-02-14T02:11:29.478Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["emberjs"],"created_at":"2024-09-24T19:48:06.147Z","updated_at":"2026-02-14T03:19:12.660Z","avatar_url":"https://github.com/adopted-ember-addons.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":["UI Components"],"readme":"# ember-sortable\n\n[![npm version](https://badge.fury.io/js/ember-sortable.svg)](http://badge.fury.io/js/ember-sortable)\n[![Build Status](https://github.com/adopted-ember-addons/ember-sortable/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/adopted-ember-addons/ember-sortable/actions?query=branch%3Amaster)\n[![Downloads Weekly](https://img.shields.io/npm/dw/ember-sortable)](http://badge.fury.io/js/ember-sortable)\n[![Ember Observer Score](http://emberobserver.com/badges/ember-sortable.svg)](http://emberobserver.com/addons/ember-sortable)\n[![Code Climate](https://codeclimate.com/github/jgwhite/ember-sortable/badges/gpa.svg)](https://codeclimate.com/github/jgwhite/ember-sortable)\n\nSortable UI primitives for Ember.\n\n[Check out the demo](https://ember-sortable.netlify.app/)\n\n## Requirements\n\n| Ember Sortable | Ember | Node |\n|----------------|-------|------|\n| 3.0.0          | 3.24+ | 12+  |\n| 4.0.0          | 3.24+ | 14+  |\n| 5.0.0          | 3.28+ | n/a[^1]  |\n\n[^1]: Node is not relevant for v2 addons. As of v5.0.0, ember-sortable is a v2 addon. V2 addons don't have to be for browser-only contexts, but ember-sortable is -- so node is not relevant anymore. This is different from v1 addons, which are not browser libraries, but node programs that happen emit browser code to the consuming app at app-build time.\n\n## Installation\n\n```sh\n$ ember install ember-sortable\n```\n\n## Usage\n\n```hbs\n{{! app/components/my-list/template.hbs }}\n\n\u003col {{sortable-group onChange=this.reorderItems}}\u003e\n  {{#each this.items as |item|}}\n    \u003cli {{sortable-item model=item}}\u003e\n      {{item}}\n      \u003cspan class='handle' {{sortable-handle}}\u003e\u0026varr;\u003c/span\u003e\n    \u003c/li\u003e\n  {{/each}}\n\u003c/ol\u003e\n\n\u003cp\u003eThe last dragged item was: {{this.lastDragged}}\u003c/p\u003e\n```\n\nThe `onChange` action is called with two arguments:\n\n- Your item models in their new order\n- The model you just dragged\n\n```js\n// app/components/my-list/component.js\n\nexport default class MyList extends Component {\n  @tracked lastDragged;\n  @tracked items = ['Coal Ila', 'Askaig', 'Bowmore'];\n\n  @action\n  reorderItems(itemModels, draggedModel) {\n    this.items = itemModels;\n    this.lastDragged = draggedModel;\n  }\n}\n```\n\nThe modifier version does not support `groupModel`, use the currying of `action` or the `fn` helper.\n\n```hbs\n{{! app/components/my-list/template.hbs }}\n\n\u003col {{sortable-group onChange=(fn this.reorderItems model)}}\u003e\n  {{#each this.items as |item|}}\n    \u003cli {{sortable-item model=item}}\u003e\n      {{item}}\n      \u003cspan class='handle' {{sortable-handle}}\u003e\u0026varr;\u003c/span\u003e\n    \u003c/li\u003e\n  {{/each}}\n\u003c/ol\u003e\n```\n\n### Changing sort direction\n\nTo change sort direction, define `direction` on `sortable-group`\nPossible values are:\n- `y` (default): allowes to move items up/down\n- `x`: allowes to move items left/right\n- `grid`: items can be moved in all directions inside a group\n\n```hbs\n\u003col {{sortable-group direction=\"x\" onChange=this.reorderItems}}\u003e\n```\n\n### Changing spacing between currently dragged element and the rest of the group\n\nWhen user starts to drag element, other elements jump back. Works for all direction option.\n\nIn `y` case: elements above current one jump up, and elements below current one - jump down.\nIn `x` / `grid` case: elements before current one jump to the left, and elements after current one - jump to the right.\n\nTo change this property, define `spacing` on `sortable-item` (default is `0`):\n\n```hbs\n\u003cli {{sortable-item spacing=15}}\u003e\n```\n\n### Changing the drag tolerance\n\n`distance` attribute changes the tolerance, in pixels, for when sorting should start.\nIf specified, sorting will not start until after mouse is dragged beyond distance.\nCan be used to allow for clicks on elements within a handle.\n\n```hbs\n\u003cli {{sortable-item distance=30}}\u003e\n```\n\n### Disabling reordering\n\nThe `disabled` attribute allows you to disable sorting for the entire group and its child items.\n\n```hbs\n\u003cli {{sortable-group disabled=true}}\u003e\n```\n\n### CSS, Animation\n\nSortable items can be in one of four states: default, dragging, dropping, and activated.\nThe classes look like this:\n\n```html\n\u003c!-- Default --\u003e\n\u003cli class=\"sortable-item\"\u003e...\u003c/li\u003e\n\u003c!-- Dragging --\u003e\n\u003cli class=\"sortable-item is-dragging\"\u003e...\u003c/li\u003e\n\u003c!-- Dropping --\u003e\n\u003cli class=\"sortable-item is-dropping\"\u003e...\u003c/li\u003e\n\u003c!-- Keyboard --\u003e\n\u003cli class=\"sortable-item is-activated\"\u003e...\u003c/li\u003e\n```\n\nIn our [example app.css](docs/app/styles/app.css) we apply a\ntransition of `.125s` in the default case:\n\n```css\n.sortable-item {\n  transition: all 0.125s;\n}\n```\n\nWhile an item is dragging we want it to move pixel-for-pixel with the\nuser’s mouse so we bring the transition duration to 0. We also give\nit a highlight color and bring it to the top of the stack:\n\n```css\n.sortable-item.is-dragging {\n  transition-duration: 0s;\n  background: red;\n  z-index: 10;\n}\n```\n\nWhile dropping, the `is-dragging` class is removed and the item returns to its default transition duration. If we wanted to apply a\ndifferent duration we could do so with the `is-dropping` class. In\nour example we opt to simply maintain the z-index and apply a\nslightly different colour:\n\n```css\n.sortable-item.is-dropping {\n  background: #f66;\n  z-index: 10;\n}\n```\n\nIf the user presses space to activate and move an item via the keyboard, `is-activated` is added. Once the user drops the item it is\nremoved. Use this class to add a visual indicator that the item is selected and being manipulated.\n\n### Drag Actions\n\nThe `onDragStart` and `onDragStop` actions are available for the\n`sortable-item`s. You can provide an action to listen to these actions to\nbe notified when an item is being dragged or not.\n\nWhen the action is called, the item's model will be provided as the only\nargument.\n\n```js\n// app/components/my-list/component.js\n\nexport default class MyRoute extends Route {\n  @action\n  dragStarted(item) {\n    console.log(`Item started dragging: ${item}`);\n  },\n  @action\n  dragStopped(item) {\n    console.log(`Item stopped dragging: ${item}`);\n  }\n}\n```\n\n```hbs\n\u003cli {{sortable-item onDragStart=this.dragStarted onDragStop=this.dragStopped model=item}}\u003e\n  {{item}}\n  \u003cspan class='handle' {{sortable-handle}}\u003e\u0026varr;\u003c/span\u003e\n\u003c/li\u003e\n```\n\n### Multiple Ember-Sortables renders simultaneously\n\nThere is a service behind the scenes for communication between the group and the items and to maintain state. It does this seemlessly when the elements are rendered on the screen. However, if there are two sortables rendered at the same time, either in the same component or different components, the state management does not know which items belong to which group.\n\nBoth the `{{sortable-group}}` and `{{sortable-item}}` take an additional argument `groupName`. Should you encounter this conflict, assign a `groupName` to the group and items. You only need to do this for one of the sortables in conflict, but you can on both if you wish.\n\n```hbs\n\u003col {{sortable-group groupName='products' onChange=this.reorderItems}}\u003e\n  {{#each this.items as |item|}}\n    \u003cli {{sortable-item groupName='products' model=item}}\u003e\n      {{item}}\n      \u003cspan class='handle' {{sortable-handle}}\u003e\u0026varr;\u003c/span\u003e\n    \u003c/li\u003e\n  {{/each}}\n\u003c/ol\u003e\n```\n\nEnsure that the same name is passed to both the group and the items, this would be best accomplished by creating property on the component and referring to that property. If you are able to use the `{{#let}}` helper (useful in template only components), using `{{#let}}` makes the usage clearer.\n\n```hbs\n{{#let 'products' as |myGroupName|}}\n  \u003col {{sortable-group groupName=myGroupName onChange=this.reorderItems}}\u003e\n    {{#each this.items as |item|}}\n      \u003cli {{sortable-item groupName=myGroupName model=item}}\u003e\n        {{item}}\n        \u003cspan class='handle' {{sortable-handle}}\u003e\u0026varr;\u003c/span\u003e\n      \u003c/li\u003e\n    {{/each}}\n  \u003c/ol\u003e\n{{/let}}\n```\n\n### Disabling Drag (Experimental)\n\n`sortable-item` exposes an optional `disabled` (previously `isDraggingDisabled`) flag that you can use to disable reordering for that particular item. Disabling and item won't prevent it from changing position in the array. The user can still move other non-disabled items to over it.\n\nThis flag is intended as an utility to make your life easier with 3 main benefits:\n\n1. You can now specify which `sortable-item` are not intended to be draggable/sortable.\n2. You do not have to duplicate the `sortable-item` UI just for the purpose of disabling the `sorting` behavior.\n3. Allows you to access the entire list of `models` for your `onChange` action, which can now be a mix of sortable and non-sortable items.\n\n### Data down, actions up\n\nNo data is mutated by `sortable-group` or `sortable-item`. In the spirit of “data down, actions up”, a fresh array containing the models from each item in their new order is sent via the group’s `onChange` action.\n\nEach item takes a `model` property. This should be fairly self-explanatory but it’s important to note that it doesn’t do anything with this object besides keeping a reference for later use in `onChange`.\n\n### Accessibility\n\nThe `sortable-group` has support for the following accessibility functionality:\n\n#### Built-in Functionalities\n\n##### Keyboard Navigation\n\nThere are 4 modes during keyboard navigation:\n\n- **ACTIVATE**\n  enables the keyboard navigation.\n  Activate via `ENTER/SPACE`\n- **MOVE**\n  enables item(s) to be moved up, down, left, or right based on `direction`.\n  Activate via `ARROW UP/DOWN/LEFT/RIGHT`\n- **CONFIRM**\n  submits the new sort order, invokes the `onChange` action.\n  Activate via `ENTER/SPACE`.\n- **CANCEL**\n  cancels the new sort order, reverts back to the old sort order.\n  Activate via `ESCAPE` or when `focus` is lost.\n\n##### Focus Management\n\n- When `focus` is on a `item` or `handle`, user can effectively select the `item` via `ENTER/SPACE`. This is the `ACTIVATE` mode.\n- While `ACTIVATE`, the `focus` is locked on `sortable-group` container and will not be lost until `CONFIRM`, `CANCEL`, or `focus` is lost.\n\n#### User configurable\n\n##### Screen Reader\n\nThe default language for `ember-sortable` is English. Any language can be supported by passing in the configuration below in the appropriate language.\n\n- **a11yItemName**\n  a name for the item. Defaults to `item`.\n- **a11yAnnouncementConfig**\n  a map of `action enums` to `functions` that takes the following `config`, which is exposed by `sortable-group`.\n\n```javascript\na11yAnnounceConfig = {\n  a11yItemName, // name associated with the name\n  index, // 0-based\n  maxLength, // length of the items\n  direction, // x or y\n  delta, // +1 means down or right, -1 means up or left\n};\n```\n\nand returns a `string` constructed from the `config`.\n\n**Default value**\n\n```javascript\n{\n  ACTIVATE: function({ a11yItemName, index, maxLength, direction }) {\n    let message = `${a11yItemName} at position, ${index + 1} of ${maxLength}, is activated to be repositioned.`;\n    if (direction === 'y') {\n      message += 'Press up and down keys to change position,';\n    } else {\n      message += 'Press left and right keys to change position,';\n    }\n\n    message += ' Space to confirm new position, Escape to cancel.';\n\n    return message;\n  },\n  MOVE: function({ a11yItemName, index, maxLength, delta }) {\n    return `${a11yItemName} is moved to position, ${index + 1 + delta} of ${maxLength}. Press Space to confirm new position, Escape to cancel.`;\n  },\n  CONFIRM: function({ a11yItemName}) {\n    return `${a11yItemName} is successfully repositioned.`;\n  },\n  CANCEL: function({ a11yItemName }) {\n    return `Cancelling ${a11yItemName} repositioning`;\n  }\n}\n```\n\n##### Visual Indicator\n\n- **handleVisualClass**\n  This class will be added to the `sortable-handle` during `ACTIVATE` and `MOVE` operations. This allows you to add custom styles such as `visual arrows` via `pseudo` classes.\n\n- **itemVisualClass**\n  This class will be added to the `sortable-item` during `ACTIVATE` and `MOVE` operations. The default class added is `is-activated`. This is needed to creating a `visual indicator` that mimics `focus` b/c the native `focus` is on the container.\n\n## Testing\n\n`ember-sortable` exposes some acceptance test helpers:\n\n- [`drag`][drag]: Drags elements by an offset specified in pixels.\n- [`reorder`][reorder]: Reorders elements to the specified state.\n- [`keyboard`][keyboard]: Keycode constants for quick.\n\n[drag]: addon/src/test-support/helpers/drag.js\n[reorder]: addon/src/test-support/helpers/reorder.js\n[keyboard]: addon/src/test-support/utils/kebyoard.js\n\nTo include them in your application, you can import them:\n\n```js\nimport { \n  drag, reorder,\n  ENTER_KEY_CODE,\n  SPACE_KEY_CODE,\n  ESCAPE_KEY_CODE,\n  ARROW_KEY_CODES,\n} from 'ember-sortable/test-support';\n```\n\n### Examples\n\n`Reorder`\n\n```js\nawait reorder('mouse', '[data-test-vertical-demo-handle]', ...order);\n```\n\n`Drag`\n\n```js\nawait drag('mouse', '[data-test-scrollable-demo-handle] .handle', () =\u003e {\n  return { dy: itemHeight() * 2 + 1, dx: undefined };\n});\n```\n\n`Keyboard`\n\n```js\nawait triggerKeyEvent('[data-test-vertical-demo-handle]', 'keydown', ENTER_KEY_CODE);\n```\n\n## Migrating\n\n### v3 -\u003e v4\n\nNone, just make sure Node v14+ and Ember is v3.24+. Although older versions might work, but are no longer tested against. Specifically ember-modifier dropped support for older versions of Ember.\n\n### v2 -\u003e v3\n\nThe component versions have been removed and you must use the modifier.\nThe modifier version does not support `groupModel`, use the currying of the `fn` helper.\n\n### v1 -\u003e v2\n\nIf you are migrating from `1.x.x` to `2.x.x`,\nFor components, please read this [migration guide](/MIGRATION_GUIDE_V2.md).\nFor modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).\n\n## Developing\n\n### Requirement\n\nYou need to install nodejs and [pnpm](https://pnpm.io/installation).\nThe specific versions you need, you can find [here](package.json#L19-L22)\n\n### Setup\n\n```sh\n$ git clone git@github.com:adopted-ember-addons/ember-sortable\n$ cd ember-sortable\n$ pnpm install\n```\n\n### Dev Server\n\n```sh\n$ cd test-app\n$ ember serve\n```\n\n### Running Tests\n\n```sh\n$ pnpm run test\n```\n\n### Publishing Demo\n\n```sh\n$ make demo\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadopted-ember-addons%2Fember-sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadopted-ember-addons%2Fember-sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadopted-ember-addons%2Fember-sortable/lists"}