Drag and drop modifiers for Ember.js internally powered by the Atlassian Design System.
- Ember.js v4.12 or above
- Embroider or ember-auto-import v2
ember install ember-draggable-modifiers
This example creates a sortable list by drag and drop.
The actual reordering is done in the the move()
action, leveraged by the optional array utils provided with this addon. Use your own custom logic if needed.
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { insertBefore, insertAfter, removeItem } from 'ember-draggable-modifiers/utils/array';
export default class ExampleComponent extends Component {
@tracked items = [ "One", "Two", "Three", "Four", "Five" ];
@action move ({ source: { data: draggedItem }, target: { data: dropTarget, edge } }) {
this.items = removeItem(this.items, draggedItem);
if (edge === 'top') {
this.items = insertBefore(this.items, dropTarget, draggedItem);
} else {
this.items = insertAfter(this.items, dropTarget, draggedItem);
}
}
}
The {{sortable-item}}
modifier combines both dragging and dropping functionality, for better control you can use the {{draggable-item}}
and {{drop-target}}
modifiers separately to better control the user interactions.
Check the docs site for more interactive examples.
See the Contributing guide for details.
This project is licensed under the MIT License.