vueUse draggable

src/mock/index.js

@@ -373,6 +373,14 @@ export default [
                     "url": "/elements/useDraggable"
 
                   },
+                  {
+                    "id": "5-1-2",
+                    "name": "useDropZone",
+                    "parent_id": "3",
+                    "type": "2",
+                    "url": "/elements/useDropZone"
+
+                  },
 
                 ]
               },

src/router/modules/vueUse.js

@@ -25,6 +25,12 @@ export default {
           name: 'useDraggable',
           meta: {title: 'useDraggable', icon: 'star'}
         },
+        {
+          path: '/elements/useDropZone',
+          component: () => import('@/views/vue-use/elements/useDropZone.vue'),
+          name: 'useDropZone',
+          meta: {title: 'useDropZone', icon: 'star'}
+        },
 
       ]
     },

src/views/vue-use/elements/useDraggable.vue

@@ -1,7 +1,9 @@
 <template>
  <div style="position: relative">
-   <div ref="el" :style="style" style="position: fixed;background: #304156;height: 100px;width: 100px;color: white">
-     Drag me! I am at {{x}}, {{y}}
+   <div ref="el" :style="style" style="position: fixed;background: #304156;height: 100px;width: 100px;color: white;padding: 20px;line-height: 22px">
+     拖动我
+     <p>x：{{x}}</p>
+     <p>y：{{y}}</p>
    </div>
  </div>
 </template>

src/views/vue-use/elements/useDropZone.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="flex">
+    <div>
+      <p style="margin-bottom: 20px">拖动图片到下面的灰色框</p>
+      <img src="/favicon.ico" alt="Drop me">
+
+      <div ref="dropZoneRef" style="background:gainsboro;height: 400px;width: 400px;margin-top: 20px">
+          <div v-for="(file, index) in filesData" :key="index" style="padding: 20px">
+            <p>文件名: {{ file.name }}</p>
+            <p>文件大小: {{ file.size }}</p>
+            <p>文件类型: {{ file.type }}</p>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "useDropZone"
+}
+</script>
+<script setup>
+import { ref } from 'vue'
+import { useDropZone } from '@vueuse/core'
+
+const filesData = ref([])
+function onDrop(files) {
+  filesData.value = []
+  if (files) {
+    filesData.value = files.map(file => ({
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      lastModified: file.lastModified,
+    }))
+  }
+}
+
+const dropZoneRef = ref(null)
+
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+</script>
+
+<style scoped>
+
+</style>