feat: add drag n drop example

2021-07-15 23:33:17 +02:00
parent 2f93c917e0
commit 9b78c0f5d2
4 changed files with 143 additions and 0 deletions
@@ -0,0 +1,25 @@
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/revueflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  }
+};
+
+const Sidebar = () => {
+  return (
+    <aside>
+      <div class="description">You can drag these nodes to the pane on the left.</div>
+      <div class="revue-flow__node-input" onDragstart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
+        Input Node
+      </div>
+      <div class="revue-flow__node-default" onDragstart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
+        Default Node
+      </div>
+      <div class="revue-flow__node-output" onDragstart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
+        Output Node
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;