Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sortablejs/ember-sortablejs
EmberJS wrapper for the sortable library
https://github.com/sortablejs/ember-sortablejs
ember-addon ember-sortablejs emberjs sortable sortablejs
Last synced: about 1 month ago
JSON representation
EmberJS wrapper for the sortable library
- Host: GitHub
- URL: https://github.com/sortablejs/ember-sortablejs
- Owner: SortableJS
- License: mit
- Created: 2019-04-11T02:33:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T14:36:32.000Z (over 1 year ago)
- Last Synced: 2024-04-23T20:54:40.399Z (7 months ago)
- Topics: ember-addon, ember-sortablejs, emberjs, sortable, sortablejs
- Language: JavaScript
- Homepage:
- Size: 1.05 MB
- Stars: 12
- Watchers: 5
- Forks: 9
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-sortablejs
==============================================================================
[](https://travis-ci.org/SortableJS/ember-sortablejs)
[](https://emberobserver.com/addons/ember-sortablejs)
This addon allows you to use drag and drop in your ember application using [SortableJS/Sortable](https://github.com/SortableJS/Sortable)
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.13 or above
* Ember CLI v3.13 or above
* Node.js v10 or above
Installation
------------------------------------------------------------------------------
> **NOTE**: The beta version is out. Please give me a hand and test it out.
```
ember install ember-sortablejs@beta
```
This addon has a peer dependency on `sortablejs` that will be installed with the addon
Still to do
------------------------------------------------------------------------------
Refer to the upcoming [project](https://github.com/SortableJS/ember-sortablejs/projects/2)
Library support
------------------------------------------------------------------------------
Currently supported:
- [x] Drag from one list to another
- [x] Sort
- [ ] Clone
- [ ] Swap
- [ ] Multi Drag
- [ ] Nested List
Usage
------------------------------------------------------------------------------
```hbs
{{!-- this.list = [{ name: 'item one' }, { name: 'item two' },..] --}}
{{#each list as |item|}}
{{item.value.name}}
{{/each}}
```
How it works
------------------------------------------------------------------------------
SortableJs works by manipulating the DOM directly this is NOT compatible with
the Glimmer VM. To mitigate this we need tu use SortableJs as a middle man and use
the events it emits to update state and prevent the DOM manipulation the library does.
This is accomplished by maintaining an internal list. This list is a copy of the
array supplied via `@items`. The events `onStart`, `onEnd`, `onUpdate`, `onAdd`,
`onRemove` are intercepted to prevent DOM manipulation and maintaining the internal
list.
You HAVE to provide an object. As the addon uses a WeakMap to cache the items supplied.
When SortableJs emits we update the list and the cache to make changes that will update
the DOM. The addon will ***yield*** an array of objects. Each object contains the key `value`,
which is the original object supplied via `@items`.
I you have ideas on how to approach this better. Please open an issue 😄
Caveats
------------------------------------------------------------------------------
- Not all SortableJS plugins work... yet.
- While you could bypass `@items` I highly discourage since the library manipulates the DOM directly.
Options
------------------------------------------------------------------------------
The addon supports all the options that sortable accepts, see: https://github.com/SortableJS/Sortable#options
Component API
------------------------------------------------------------------------------
|arg|type|description|
|:---|:---:|:---|
| `@items` | Array | A list of objecs to be managed by the addon |
| `@options` | Object | A hash options supported by SortableJs|
| `@tag` | String | The element to be used to render the list (default: "div")|
| `@onChoose` | Function | (SortablejsEvent) => {...} |
| `@onUnchoose` | Function | (SortablejsEvent) => {...} |
| `@onStart` | Function | (SortablejsEvent) => {...} |
| `@onEnd` | Function | (SortablejsEvent, cancelDnD) => {...} |
| `@onAdd` | Function | (SortablejsEvent) => {...} |
| `@onUpdate` | Function | (SortablejsEvent) => {...} |
| `@onSort` | Function | (SortablejsEvent) => {...} |
| `@onRemove` | Function | (SortablejsEvent) => {...} |
| `@onMove` | Function | (SortablejsMoveEvent) => {...} |
| `@onClone` | Function | (SortablejsEvent) => {...} |
| `@onChange` | Function | (SortablejsEvent) => {...} |
| `@scrollFn` | Function | (SortablejsEvent) => {...} |
| `@setData` | Function | (SortablejsEvent) => {...} |
| `@onFilter` | Function | (SortablejsEvent) => {...} |
| `@onSpill` | Function | (SortablejsEvent) => {...} |
`SortablejsEvent` - A [`CustomEvent`](https://github.com/SortableJS/Sortable#event-object-demo) provided by SortableJS
`SortablejsMoveEvent` - A [`CustomEvent`](https://github.com/SortableJS/Sortable#move-event-object) provided by SortableJS
`cancelDnD` - A callback provided by the ember addon to basically undo you last drag and drop or sort;
`{{yield}}` - An array of objects with the key `value` where its value is the object supplied. `{ value: }`
Migrating from 1.x
------------------------------------------------------------------------------
- `onSetData` is no longer suported. Rename argument to `setData`.
- `` no longer expects a wrapped list. Instead the addon itself will act as the sortable list container.
v1
```hbs
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
```
v2
```hbs
{{!-- this.list = [{ name: 'item one' }, { name: 'item two' },..] --}}
{{#each list as |item|}}
{{/each}}
```
License
------------------------------------------------------------------------------
This project is licensed under the [GPL-3.0 License](LICENSE.md).