🔹 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