zestia / 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

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>

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-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);

ember-dragula's Issues

How work with lists updates?

Hi,

I saw you uses did-insert and will-destroy modifiers, but not did-update.
Maybe i can help with this? How you see realization?

Demo site unavailable

Was just taking a look at things and noticed that the demo site is unavailable due to several 404s.

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