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

Front End