f8a0530 (v3.15.0...v4.6.0)

This addon allows you to use drag and drop in your ember application using SortableJS/Sortable

<<<<<<< HEAD

• 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.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v14 or above

f8a0530 (v3.15.0...v4.6.0)

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

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

f8a0530 (v3.15.0...v4.6.0)

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.

<<<<<<< HEAD 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 - 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> }

• onSetData is no longer suported. Rename argument to setData.
• <SortableJs> no longer expects a wrapped list. Instead the addon itself will act as the sortable list container.

v1

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

v2

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

=======

f8a0530 (v3.15.0...v4.6.0)

This project is licensed under the GPL-3.0 License.