Empower Drag Drop Container
npm i empower-drag-drop-container
Include in the component:
import DragDropContainer from 'empower-drag-drop-container';
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
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;