Package Exports

react-announce-draggable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-announce-draggable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Reactive Announce Draggable

A simple react-announce extension that helps in consolidating the drag and drop events.

Installation

npm i react-announce-draggable --save

Example Usage

Auto fires three types of custom events — DRAG_START, DRAG_OVER and DROP, on the component stream.

import {draggable, droppable, consolidate}  from 'react-announce-draggable'
import {asStream} from 'react-announce'
import rx from 'rx'

const bus = new rx.Subject()

@draggable
@asStream(bus)
class Apple extends Component {
  render () {
    return (
      <div draggable="true">
        APPLE
      <div>
    )
  }
}

@droppable
@asStream(bus)
class Basket extends Component {
  render () {
    return (
      <div>
        Fruit Basket
      <div>
    )
  }
}

consolidate(bus).subscribe(x => console.log(x))

/** OUTPUT:
{picked: {component: Apple}, type: 'PICKED'}
{over: {component: Basket}, picked: {component: Apple}, type: 'DRAG'}
{over: {component: Basket}, picked: {component: Apple}, type: 'DRAG'}
{over: {component: Basket}, picked: {component: Apple}, type: 'DROP'}
**/

API

@draggable — Dispatches DRAG_START event on the component's stream.
@droppable — Dispatches DRAG_OVER and DROP event on the component's stream.
consolidate(observer) — Takes input as the observer and returns a consolidated stream which contains information about what has been picked and where it has been dropped.