A ember component to make all elements drag- or dropable
npm install ember-cli-dnd --save-dev
In a template use the drag-element
or drop-element
helper
<ul class="list-group">
{{#each item in items}}
{{#drag-element item=item.id elementName='something'}}
<li class="list-group-item drag-element">{{item.name}}</li>
{{/drag-element}}
{{/each}}
</ul>
{{#drop-element dropAction='dropDelete' elementName='trash'}}
<div> class="list-group-item list-group-item-danger">Trash</div>
{{/drop-element}}
In the controller for the template you must create an action that matches the name given in the helper.
Ember.Controller.extend({
actions: {
dropDelete: function(item, elemetName, senderElement) {
...
}
}
});
Make special note of this.set('savePromise', promise);
In order for
async-button
to work correctly the promise in the action must be
assigned to the property of <actionName>Promise
. So if you are using
an action named destroyRecord
you need to assign to destroyRecordPromise
.
drag-element
item
This is the value to transfer to the drop-element
, it can be a single value or a object.
Do not tranfer ember-data objects cause they do not serialize properly.
elementName
This is a optional information to inform the drop-element
where the information comes from.
drop-element
dropAction
Provide the action name that should be called when a element is dropend onto.
The action handler gets the item item
, element where its got droped onto elemetName
and the element where it's coming from senderElement
elementName
This is a optional information to inform the drop-element
where the information comes from.