Drag and Drop Container

Description

Drag and Drop Container component is used to manually change the ordering of the div containers.

 

 

System Dependencies

Installation

The package can be installed via npm:

npm install empower-drag-drop-container --save

 

Configuration

import DragDropContainer from 'empower-drag-drop-container'; .............. let getComponentOrder = (value) => { console.log(value); // this will handle the action } .............. <div className="card-page"> <DragDropContainer id="component-collection" savedOrder={"component-collection-item-2,component-collection-item-0,component-collection-item-3,component-collection-item-1"} getOrder={(val) => getComponentOrder(val)} > <div id="test-1"> <h1>test title</h1> <p>test</p> </div> <div id="test-2">Component 2</div> <div id="test-3">Component 3</div> <div id="test-4">Component 4</div> </DragDropContainer> </div>

 

 Properties

Parameter

Data Type

Constraint

Description

Parameter

Data Type

Constraint

Description

id

String

Required

Id of the component.

 

savedOrder

String

Optional

This is the container ordering (e.g. component-collection-item-0,component-collection-item-2,component-collection-item-3,component-collection-item-1) upon component loading, optional props.

isDisabled

Boolean

Optional

Boolean value, make this true if you want to disable the drag and drop functionality.

getOrder

Function

Required

this is the function that will be called upon dragging and dropping of each divs

References

Repository Link: https://bitbucket.org/empowerteams/empower-drag-drop-container/src/master/

NPM Package: https://www.npmjs.com/package/empower-drag-drop-container

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git