chore(docs): update drag and drop example

docs/examples/dnd/App.vue

@@ -1,73 +1,31 @@
 <script setup>
+import { ref } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { nextTick, watch } from 'vue'
+import DropzoneBackground from './DropzoneBackground.vue'
 import Sidebar from './Sidebar.vue'
+import useDragAndDrop from './useDnD'
 
-let id = 0
-function getId() {
-  return `dndnode_${id++}`
-}
+const { onConnect, addEdges } = useVueFlow()
 
-const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow({
-  nodes: [
-    {
-      id: '1',
-      type: 'input',
-      label: 'input node',
-      position: { x: 250, y: 25 },
-    },
-  ],
-})
+const { onDragOver, onDrop, onDragLeave, isDragging } = useDragAndDrop()
 
-function onDragOver(event) {
-  event.preventDefault()
+const nodes = ref([])
 
-  if (event.dataTransfer) {
-    event.dataTransfer.dropEffect = 'move'
-  }
-}
-
-onConnect((params) => addEdges(params))
-
-function onDrop(event) {
-  const type = event.dataTransfer?.getData('application/vueflow')
-
-  const { left, top } = vueFlowRef.value.getBoundingClientRect()
-
-  const position = project({
-    x: event.clientX - left,
-    y: event.clientY - top,
-  })
-
-  const newNode = {
-    id: getId(),
-    type,
-    position,
-    label: `${type} node`,
-  }
-
-  addNodes([newNode])
-
-  // align node position after drop, so it's centered to the mouse
-  nextTick(() => {
-    const node = findNode(newNode.id)
-    const stop = watch(
-      () => node.dimensions,
-      (dimensions) => {
-        if (dimensions.width > 0 && dimensions.height > 0) {
-          node.position = { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
-          stop()
-        }
-      },
-      { deep: true, flush: 'post' },
-    )
-  })
-}
+onConnect(addEdges)
 </script>
 
 <template>
   <div class="dndflow" @drop="onDrop">
-    <VueFlow @dragover="onDragOver" />
+    <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
+      <DropzoneBackground
+        :style="{
+          backgroundColor: isDragging ? 'rgba(0, 0, 0, 0.1)' : 'transparent',
+          borderColor: isDragging ? 'rgba(0, 0, 0, 0.2)' : 'transparent',
+          transition: 'background-color 0.2s, border-color 0.2s',
+        }"
+      >
+      </DropzoneBackground>
+    </VueFlow>
 
     <Sidebar />
   </div>