1.3.1 • Published 4 years ago
ember-sortablejs v1.3.1
ember-sortablejs
This addon allows you to use drag and drop in your ember application using SortableJS/Sortable
Compatibility
- Ember.js v3.13 or above
- Ember CLI v3.13 or above
- Node.js v8 or above
Installation
ember install ember-sortablejs
Usage
<SortableJs
@options={{hash animation=150 ghostClass="ghost-class" group="shared-list"}}
@onChoose={{fn this.onChoose}}
@onUnchoose={{fn this.onUnchoose}}
@onStart={{fn this.onStart}}
@onEnd={{fn this.onEnd}}
@onAdd={{fn this.onAdd}}
@onUpdate={{fn this.onUpdate}}
@onRemove={{fn this.onRemove}}
@onMove={{fn this.onMove}}
@onClone={{fn this.onClone}}
@onChange={{fn this.onChange}}
as |sortable|
>
<div class="list-group-item bg-yellow">Item 1</div>
<div class="list-group-item bg-yellow">Item 2</div>
<div class="list-group-item bg-yellow">Item 3</div>
<div class="list-group-item bg-yellow">Item 4</div>
<div class="list-group-item bg-yellow">Item 5</div>
</SortableJs>
Options
The addon supports all the options that sortable accepts, see: https://github.com/SortableJS/Sortable#options
The events:
onChoose
onUnchoose
onStart
onEnd
onAdd
onUpdate
onSort
onRemove
onMove
onClone
onChange
scrollFn
setData
onFilter
Should be in the component signature as closure actions. All actions get the events as described in the SortableJS docs as well as the sortable instance.
onChoose(evt, sortable) {...}
Migrating from 1.x
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={{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
<SortableJs
class="list-group"
@options={{hash animation=150 ghostClass="ghost-class" group="shared-list"}}
>
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5</div>
</SortableJs>
License
This project is licensed under the GPL-3.0 License.
2.0.0-beta.6
4 years ago
2.0.0-beta.5
4 years ago
2.0.0-beta.4
4 years ago
2.0.0-beta.3
4 years ago
2.0.0-beta.2
4 years ago
2.0.0-beta.1
4 years ago
2.0.0-beta.0
4 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago
1.0.0
5 years ago