isabella232 / ember-dragula

🖱️ An ember addon for drag and drop via dragula

@zestia/ember-dragula

This Ember addon provides support for drag and drop using dragula

Installation

ember install @zestia/ember-dragula

Demo

https://zestia.github.io/ember-dragula

Example

<EmberDragula as |d|>
  <d.Container>
    {{#each this.listOne as |item|}}
      {{item}}
    {{/each}}
  </d.Container>

  <d.Container>
    {{#each this.listTwo as |item|}}
      {{item}}
    {{/each}}
  </d.Container>
</EmberDragula>

Options

The full range of options that dragula accepts are supported, see: https://github.com/bevacqua/dragula#dragulacontainers-options

To supply options:

<EmberDragula @options={{hash option=value}} as |d|>
  ...
</EmberDragula>

Events

The full range of events that dragula emits are supported, see: https://github.com/bevacqua/dragula#drakeon-events. These can be accessed by prefixing the event name with "on":

<EmberDragula
  @onDrag={{this.onDrag}}
  @onDrop={{this.drop}}
  @onCancel={{this.cancel}}
  ...
  as |d|
>
  <d.Container>
    {{#each this.listOne as |item|}}
      {{item}}
    {{/each}}
  </d.Container>

  <d.Container>
    {{#each this.listTwo as |item|}}
      {{item}}
    {{/each}}
  </d.Container>
</EmberDragula>

The dragula instance is emitted via an onReady action, and allows access to all functions and fields on drake (https://github.com/bevacqua/dragula#api):

<EmberDragula @onReady={{this.ready}} as |d|>
  ...
</EmberDragula>

Test helpers

To simulate dragging and dropping, test helpers are provided:

import { simulateDragDrop } from '@zestia/ember-dragula/test-support/helpers/simulate-drag-drop';

Within a test:

const dragMe = find('.drag-me');
const dropHere = find('.drop-here');

await simulateDrag(dragMe);
await simulateDrop(dragMe, dropHere);
await simulateDragDrop(dragMe, dropHere);