Repository files navigation

This addon allows you to use drag and drop in your ember application usingSortableJS/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 onsortablejs that will be installed with the addon

Refer to the upcomingproject

Currently supported:

• Drag from one list to another
• Sort
• Clone
• Swap
• Multi Drag
• Nested List

{{!-- this.list = [{ name: 'item one' }, { name: 'item two' },..]  --}}<SortableJs  @items={{this.list}}  @options={{hashanimation=150ghostClass="ghost-class"group="shared-list"}}  @onStart={{this.onStart}}  @onEnd={{this.onEnd}}  as |list|>{{#eachlistas |item|}}    <divclass="list-group-item bg-yellow">{{item.value.name}}</div>{{/each}}</SortableJs>

SortableJs works by manipulating the DOM directly this is NOT compatible withthe Glimmer VM. To mitigate this we need tu use SortableJs as a middle man and usethe 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 thearray supplied via@items. The eventsonStart,onEnd,onUpdate,onAdd,onRemove are intercepted to prevent DOM manipulation and maintaining the internallist.

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 updatethe DOM. The addon willyield an array of objects. Each object contains the keyvalue,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@items I 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

SortablejsEvent - ACustomEvent provided by SortableJS

SortablejsMoveEvent - ACustomEvent 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 keyvalue where its value is the object supplied.{ value: <Object> }

• onSetData is 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

<SortableJs  @options={{hashanimation=150ghostClass="ghost-class"group="shared-list"}}>  <ulclass="list-group">    <liclass="list-group-item">Item 1</li>    <liclass="list-group-item">Item 2</li>    <liclass="list-group-item">Item 3</li>    <liclass="list-group-item">Item 4</li>    <liclass="list-group-item">Item 5</li>  </ul></SortableJs>

v2

{{!-- this.list = [{ name: 'item one' }, { name: 'item two' },..]  --}}<SortableJsclass="list-group"  @items={{this.list}}  @options={{hashanimation=150ghostClass="ghost-class"group="shared-list"}}  as |list|>{{#eachlistas |item|}}    <divclass="list-group-item">{{item.value.name}}</div>{{/each}}</SortableJs>

This project is licensed under theGPL-3.0 License.