Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Interface/DragAndDropElements/DragAndDropElements.js

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {
+    Container,
+    Button
+} from './../../../components';
+import {
+    HeaderMain
+} from './../../components/HeaderMain';
+import {
+    HeaderDemo
+} from './../../components/HeaderDemo';
+
+import {
+    MultipleVerticalLists,
+    DraggableTable,
+    HorizontalLists
+} from './components';
+
+export class DragAndDropElements extends React.Component {
+    multipleVerticalListsRef = React.createRef();
+    draggableTableRef = React.createRef();
+    horizontalLists = React.createRef();
+
+    onResetState = () => {
+        this.multipleVerticalListsRef.current.recoverInitialState();
+        this.draggableTableRef.current.recoverInitialState();
+        this.horizontalLists.current.recoverInitialState();
+    }
+
+    render() {
+        return (
+            <Container>
+                <div className="d-flex">
+                    <div>
+                        <HeaderMain title="Drag &amp; Drop Elements" 
+                            className="mb-5 mt-4"
+                        />
+                    </div>
+                    <Button onClick={ this.onResetState } className="ml-auto align-self-center" color="primary" outline>
+                        Reset Layout
+                    </Button>
+                </div>
+
+                <div className="mb-5">
+                    <HeaderDemo
+                        no="1"
+                        title="Mutliple Verical Lists"
+                        subTitle="Both list are draggable horizontally and inner list elements can be swapped or reorderd"
+                    />
+                    <MultipleVerticalLists ref={ this.multipleVerticalListsRef }/>
+                </div>
+
+                <div className="mb-5">
+                    <HeaderDemo
+                        no="2"
+                        title="Table"
+                        subTitle="Allows reordering of the table rows"
+                    />
+                    <DraggableTable ref={ this.draggableTableRef }/>
+                </div>
+                <div>
+                    <HeaderDemo
+                        no="3"
+                        title="Horizontal Lists"
+                        subTitle="Items can be reaordered and moved between lists"
+                    />
+                    <HorizontalLists ref={ this.horizontalLists }/>
+                </div>
+            </Container>
+        );
+    }
+}