Simple drag and drop with dragula and ember
An ember-cli addon for using Dragula - A drag and drop library.
Inside an ember-cli project, run:
ember install ember-dragula
This will install ember-dragula and dragula and wire everything up for you. Now you have two components available: {{ember-dragula}}
and {{ember-dragula-container}}
.
{{#ember-dragula config=dragulaconfig}}
{{#ember-dragula-container }}
<div>drag me</div>
<div>or me</div>
{{/ember-dragula-container}}
{{#ember-dragula-container }}
<div>you can also drag me</div>
<div>and me</div>
{{/ember-dragula-container}}
{{/ember-dragula}}
Dragula will allow the user to drag any direct child element of a {{ember-dragula-container}}
. {{ember-dragula}}
is the component that manages the lifecycle of the associated drake and should always wrap around your containers in the template.
In the above code snippet, the config parameter must be set in the following format on a parent controller/component.
dragulaconfig: {
options: {
copy: false,
revertOnSpill: false,
removeOnSpill: false
// Other options from the dragula source page.
},
enabledEvents: ['drag', 'drop']
}
You can enable any of the default Dragula events in the config as seen above. When they're enabled, you still need to define corresponding actions on your parent controller/component:
{{#ember-dragula config=dragulaconfig drag='onDrag' drop='onDrop'}}
{{#ember-dragula-container }}
<div>drag me</div>
<div>or me</div>
{{/ember-dragula-container}}
{{/ember-dragula}}
If you can not nest the markup directly, you can pass the drake
instance down directly:
{{#ember-dragula config=dragulaconfig as |drake|}}
<div>
{{#ember-dragula-container drake=drake}}
<div>drag me</div>
<div>or me</div>
{{/ember-dragula-container}}
</div>
{{/ember-dragula}}
git clone
this repositorynpm install
bower install
ember server
ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.