@interactivity/drag-component

Installation

npm install --save @interactivity/drag-component

Usage

example code

"use strict"

import React from "react";
import { DragContainer, DragHolder, DragItem } from "@interactivity/drag-component";

const DragPlayground = () => (
  <DragContainer alignHolderSize = {true} onDragEnd = { status => console.log(status)}>
    <h2> Drag Playground </h2>
    <div className="flex-container flex-direction-row">
      <div style = {{ flex: 1}} >
        <DragHolder direction = "column"
                    id = "holder_1"
                    stretch
                    minHeight = {40}
        >
          <Draggable id = "red" mode = {mode}>
            <div className = "red" style = {{height: '40px'}}> Drag me!</div>
          </Draggable>
          <Draggable id = "green" mode = {mode}>
            <div className = "green" style = {{height: '40px'}}> Drag me!</div>
          </Draggable>
        </DragHolder>
      </div>
      <div style = {{ flex: 1}} >
        <DragHolder direction = "column"
                    id = "holder_1"
                    stretch
                    minHeight = {40}
        >
          <Draggable id = "blue" mode = {mode}>
            <div className = "blue" style = {{height: '40px'}}> Drag me!</div>
          </Draggable>
        </DragHolder>
      </div>
    </div>
  </DragContainer>
);

DragContainer

Control the draggable zone. It manages DragHolder and DragItem components

Props:

• width: optional specify fixed width in pixel of the drag zone

• height: optional specify fixed height in pixel of the drag zone

• alignHolderSize: default = false all holder with same direction will be aligned in their main dimension

• fixedHolderLength: default = false specify if all holders have their length (width or height depend on its direction) equal to total item length

• initState: optional initial state of holders and items

• onDragEnd: optional callback that receive internal status of holders and items

DragHolder

Holder storing draggable items which operate in flow mode.

Props:

• id: mandatory ID of DragHolder

• direction: mandatory growth direction of the holder when items are added, i.e. row or column

• stretch: optional the holder width will be 100%. It overrides the alignHolderSize. Note that stretch only work with direction = row and does not affect to height

• size: optional an object {width, height} specifing fixed width or heigtht of the holder

• minWidth: optional specify minWidth of the holder

• minHeight: optional specify minHeight of the holder

Draggable

Wrap element in an draggable item

Props:

• id: mandatory ID of Draggable

• mode: default = flow. In flow mode, drag item is only stay inside a holder, in free mode, drag item can be drag anywhere