empower-drag-drop-container v0.1.1

Empower Drag Drop Container

Installation

npm i empower-drag-drop-container

Usage

Include in the component:

import DragDropContainer from 'empower-drag-drop-container';

Properties

id - id of the component

savedOrder - 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 value, make this true if you want to disable the drag and drop functionality.

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

Example

const App = () => {

  let getComponentOrder = (value) => {
    console.log(value);
  }

  return (
    <div className="sample-div">
        <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)} 
        >
            {/* COMPONENTS HERE */}
            <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>
  );
}

export default App;