🔹 Description
Drop and Drap 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 |
---|---|---|---|
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://gitlab.com/empowerteams/empower-drag-drop-container.git
NPM Package: https://www.npmjs.com/package/empower-drag-drop-container
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git