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 very compatible with the Glimmer VM. To mitigate this we need tu use SortableJs as a middle and use the events it emits to update state and prevent the DOM manipulation the lib 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.
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 the items 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;
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.