draggable-ng

draggable-ng

🖯 Angular wrapper for @shopify/draggable

This is a very early alpha build not suitable for production use

Usage

Include the Draggable Module in one of your apps modules.

import { DraggableModule } from 'draggable-ng/dist/draggable.module';

@NgModule({
  imports: [ DraggableModule ]
})

Draggable

import { Component } from '@angular/core';
import { DraggableOptions } from 'draggable-ng/dist/model/draggable-options';

@Component({
  selector: 'some-component',
  templateUrl: './some.component.html'
})
export class SomeComponent {
  options = new DraggableOptions();

  onDragEvent(event) {
    console.log(event);
  }

  onMirrorEvent(event) {
    console.log(event);
  }
}

<draggable options=options (onDragEvent)=onDragEvent($event) (onMirrorEvent)=onMirrorEvent($event)>
  <ul draggable-container>
    <li class="draggable-source">Bread</li>
    <li class="draggable-source">Eggs</li>
    <li class="draggable-source">Milk</li>
  </ul>

  <ul draggable-container>
    <li class="draggable-source">Chicken</li>
    <li class="draggable-source">Beef</li>
    <li class="draggable-source">Pastrami</li>
  </ul>
</draggable>

Where options is an instance of Draggable Options.

Mirror events and drag events are emitted on separate event emitters and each emits an Object of the form

{
  type
  event
}

Where event type is from the list of events

Droppable

import { Component } from '@angular/core';
import { DraggableOptions } from 'draggable-ng/dist/model/draggable-options';

@Component({
  selector: 'some-component',
  templateUrl: './some.component.html'
})
export class SomeComponent {
  options = new DraggableOptions();

  onDragEvent(event) {
    console.log(event);
  }

  onMirrorEvent(event) {
    console.log(event);
  }

  onDropEvent(event) {
    console.log(event);
  }
}

<droppable options=options (onDragEvent)=onDragEvent($event) (onDropEvent)=onDropEvent($event) (onMirrorEvent)=onMirrorEvent($event)>
  <ul draggable-container  class="draggable-droppable">
    <li class="draggable-source">Bread</li>
    <li class="draggable-source">Eggs</li>
    <li class="draggable-source">Milk</li>
  </ul>

  <ul draggable-container  class="draggable-droppable">
    <li class="draggable-source">Chicken</li>
    <li class="draggable-source">Beef</li>
    <li class="draggable-source">Pastrami</li>
  </ul>
</droppable>

Where options is an instance of Draggable Options.

Mirror, drag and drop events are emitted on separate event emitters and each emits an Object of the form

{
  type
  event
}

Where event type is from the list of drag events or the list of drop events