This addon allows you to use drag and drop in your ember application using SortableJS/Sortable
- Ember.js v3.13 or above
- Ember CLI v3.13 or above
- Node.js v10 or above
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
Refer to the upcoming project
Currently supported:
- Drag from one list to another
- Sort
- Clone
- Swap
- Multi Drag
- Nested List
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 😄
- Not all SortableJS plugins work... yet.
- While you could bypass
@itemsI highly discourage since the library manipulates the DOM directly.
The addon supports all the options that sortable accepts, see: https://github.com/SortableJS/Sortable#options
| 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 provided by SortableJS
SortablejsMoveEvent - A CustomEvent 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: <Object> }
onSetDatais no longer suported. Rename argument tosetData.<SortableJs>no longer expects a wrapped list. Instead the addon itself will act as the sortable list container.
v1
v2
This project is licensed under the GPL-3.0 License.