@zestia/ember-dragula

This Ember addon provides support for drag and drop using dragula

Installation

ember install @zestia/ember-dragula dragula

Add the following to ~/.npmrc to pull @zestia scoped packages from Github instead of NPM.

@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=<YOUR_GH_TOKEN>

Add this line to app/app.js to import the base dragula styles:

import 'dragula/dist/dragula.css';

Demo

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

Example

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

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

Dragula

Arguments

@options

Optional. The full range of options that dragula accepts are supported, see the docs.

@onReady

Optional. The dragula instance is emitted via this action, allowing access to the drake API.

@on<Event>

Optional. The full range of events that dragula emits are supported, see the docs. These can be accessed by prefixing the event name with "on", e.g. @onDrag

Test helpers

To simulate dragging and dropping, test helpers are provided.

Example

import { simulateDragDrop } from '@zestia/ember-dragula/test-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);