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

Demo

Installation

ember install @zestia/ember-dragula

Usage

<EmberDragula as |d|>
  <d.container>
    {{#each list as |item|}}
      {{item}}
    {{/each}}
  </d.container>

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

Options

@zestia/ember-dragula supports the full range of options that dragula accepts, see : https://github.com/bevacqua/dragula#dragulacontainers-options

To supply options:

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

Events

@zestia/ember-dragula supports the full range of events that dragula emits, see https://github.com/bevacqua/dragula#drakeon-events. These can be accessed by prefixing the event name with on:

<EmberDragula @onDrag={{action "drag"}} @onDrop={{action "drop"}} @onCancel={{action "cancel"}} ... as |d|>
  <d.container>
    {{#each list as |item|}}
      {{item}}
    {{/each}}
  </d.container>

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

  drop(el, target, source, sibling) {

  }

The dragula instance is emitted via an onInit event as follows and allows access to all functions and fields on drake:

<EmberDragula @onInit={{action "init"}} as |d|>
  ...
</EmberDragula>

  init(drake) {

  }

Test helpers

To simulate dragging a HTML Element over another a test helper is provided.

 import { simulateDragAndDrop } from '@zestia/ember-dragula/utils/simulate-drag-drop'

Then within a test

  const draggingElement = this.$('foo');
  const droppingElement = this.$('bar');

  simulateDragAndDrop(draggingElement, droppingElement);

If you need to drag an element, wait for an async event and then drop that element there are separate test helpers provided for this use case:

import { simulateDrag, simulateDrop } from '@zestia/ember-dragula/utils/simulate-drag-drop'

  const draggingElement = this.$('foo');
  const droppingElement = this.$('bar');

  simulateDrag(draggingElement);

  await someAsyncAction

  simulateDrop(draggingElement, droppingElement);

Developing

Installation

• git clone https://github.com/zestia/ember-dragula.git
• cd ember-dragula
• npm install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit https://ember-cli.com/.