diff --git a/devui/dragdrop/index.ts b/devui/dragdrop/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7de249ace53ca27786980667faef73b40726322f
--- /dev/null
+++ b/devui/dragdrop/index.ts
@@ -0,0 +1,22 @@
+import type { App } from 'vue'
+import Dragdrop from './src/dragdrop'
+import DragdropDirective from './src/dragdrop-directive'
+import DragdropService from './src/dragdrop-service'
+
+Dragdrop.install = function(app: App): void {
+  app.component(Dragdrop.name, Dragdrop)
+}
+
+export { Dragdrop, DragdropDirective, DragdropService }
+
+export default {
+  title: 'Dragdrop 拖拽',
+  category: '通用',
+  status: '你猜猜', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+    
+    app.use(Dragdrop as any)
+    app.directive('Dragdrop', DragdropDirective)
+    app.config.globalProperties.$dragdropService = DragdropService
+  }
+}
diff --git a/devui/dragdrop/src/dragdrop-directive.ts b/devui/dragdrop/src/dragdrop-directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..788dde30eedb905e475ad731757230cb936f4d3a
--- /dev/null
+++ b/devui/dragdrop/src/dragdrop-directive.ts
@@ -0,0 +1,10 @@
+// can export function.
+export default {
+  // created() { },
+  // beforeMount() { },
+  // mounted() { },
+  // beforeUpdate() { },
+  // updated() { },
+  // beforeUnmount() { },
+  // unmounted() { }
+}
diff --git a/devui/dragdrop/src/dragdrop-service.ts b/devui/dragdrop/src/dragdrop-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..11b6313596f1b318215a7a4ff2dbfb49374a4791
--- /dev/null
+++ b/devui/dragdrop/src/dragdrop-service.ts
@@ -0,0 +1,7 @@
+// import { DragdropProps } from './dragdrop-types'
+
+const DragdropService = {
+  // open(props: DragdropProps) { }
+}
+
+export default DragdropService
diff --git a/devui/dragdrop/src/dragdrop-types.ts b/devui/dragdrop/src/dragdrop-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0dd0bb1d5706d33d65bd3228e08ef247984dc7f7
--- /dev/null
+++ b/devui/dragdrop/src/dragdrop-types.ts
@@ -0,0 +1,9 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+
+export const dragdropProps = {
+  /* test: {
+    type: Object as PropType<{ xxx: xxx }>
+  } */
+} as const
+
+export type DragdropProps = ExtractPropTypes<typeof dragdropProps>
diff --git a/devui/dragdrop/src/dragdrop.scss b/devui/dragdrop/src/dragdrop.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cabffef617276108e0bdeb44fa4fe0c02969c385
--- /dev/null
+++ b/devui/dragdrop/src/dragdrop.scss
@@ -0,0 +1,3 @@
+.d-dragdrop {
+  //
+}
diff --git a/devui/dragdrop/src/dragdrop.tsx b/devui/dragdrop/src/dragdrop.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f0b8c3c33ef425798d9bc95d55b0372d49d40e5
--- /dev/null
+++ b/devui/dragdrop/src/dragdrop.tsx
@@ -0,0 +1,18 @@
+import './dragdrop.scss'
+
+import { defineComponent } from 'vue'
+import { dragdropProps, DragdropProps } from './dragdrop-types'
+
+export default defineComponent({
+  name: 'DDragdrop',
+  props: dragdropProps,
+  emits: [],
+  setup(props: DragdropProps, ctx) {
+    return {}
+  },
+  render() {
+    const {} = this
+
+    return <div class="d-dragdrop"></div>
+  }
+})