From e60f3884cfc4508667f361e1e062c503ca20317b Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Sun, 31 Oct 2021 09:35:37 +0800
Subject: [PATCH 1/4] feat(dragdrop): basic dragdrop

---
 .../devui/dragdrop/__tests__/dragdrop.spec.ts |  8 ++
 packages/devui-vue/devui/dragdrop/index.ts    | 15 ++++
 .../devui/dragdrop/src/draggable.directive.ts |  7 ++
 .../devui/dragdrop/src/droppable.directive.ts |  7 ++
 .../docs/components/dragdrop/index.md         | 74 +++++++++++++++++++
 5 files changed, 111 insertions(+)
 create mode 100644 packages/devui-vue/devui/dragdrop/__tests__/dragdrop.spec.ts
 create mode 100644 packages/devui-vue/devui/dragdrop/index.ts
 create mode 100644 packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
 create mode 100644 packages/devui-vue/devui/dragdrop/src/droppable.directive.ts
 create mode 100644 packages/devui-vue/docs/components/dragdrop/index.md

diff --git a/packages/devui-vue/devui/dragdrop/__tests__/dragdrop.spec.ts b/packages/devui-vue/devui/dragdrop/__tests__/dragdrop.spec.ts
new file mode 100644
index 00000000..83981b23
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/__tests__/dragdrop.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { DragdropDirective } from '../index';
+
+describe('dragdrop test', () => {
+  it('dragdrop init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/dragdrop/index.ts b/packages/devui-vue/devui/dragdrop/index.ts
new file mode 100644
index 00000000..9439e288
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/index.ts
@@ -0,0 +1,15 @@
+import type { App } from 'vue'
+import DraggableDirective from './src/draggable.directive'
+import DroppableDirective from './src/droppable.directive'
+
+export { DraggableDirective, DroppableDirective }
+
+export default {
+  title: 'Dragdrop 拖拽',
+  category: '通用',
+  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+    app.directive('DDraggable', DraggableDirective)
+    app.directive('DDroppable', DroppableDirective)
+  }
+}
diff --git a/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
new file mode 100644
index 00000000..4868750a
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
@@ -0,0 +1,7 @@
+// can export function.
+export default {
+  mounted(el: HTMLElement, binding: Record<string, unknown>): void {
+    console.log('draggable el:', el, el.textContent)
+    console.log('draggable binding:', binding)
+  },
+}
diff --git a/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts b/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts
new file mode 100644
index 00000000..f072f295
--- /dev/null
+++ b/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts
@@ -0,0 +1,7 @@
+// can export function.
+export default {
+  mounted(el: HTMLElement, binding: Record<string, unknown>): void {
+    console.log('droppable el:', el, el.textContent)
+    console.log('droppable binding:', binding)
+  },
+}
diff --git a/packages/devui-vue/docs/components/dragdrop/index.md b/packages/devui-vue/docs/components/dragdrop/index.md
new file mode 100644
index 00000000..390bdd67
--- /dev/null
+++ b/packages/devui-vue/docs/components/dragdrop/index.md
@@ -0,0 +1,74 @@
+# Dragdrop 拖拽
+
+拖拽组件。
+
+### 何时使用
+
+当需要使用数个操作步骤，且步骤的顺序需要灵活调整时。
+
+### 基本用法
+
+:::demo 从一个container拖动到另外一个container。
+
+```vue
+<template>
+  <div>
+    <div v-d-draggable>拖拽区</div>
+    <div v-d-droppable>放置区</div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      msg: 'Dragdrop 拖拽 组件文档示例'
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
+```
+
+:::
+
+### d-draggable 指令
+
+d-draggable 参数
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
+| ---- | ---- | ---- | ---- | --------- | --------- |
+|   dragData   |   any   |   --   |   可选，转递给 DropEvent事件的数据   |      [基本用法](#基本用法)     |           |
+|   dragScope   |   string \| Array\<string\>   |   'default'   |   可选，限制 drop 的位置，必须匹配对应的 dropScope   |      [基本用法](#基本用法)     |           |
+
+d-draggable 事件
+
+| 事件 | 类型 | 说明 | 跳转 Demo |
+| ---- | ---- | ---- | --------- |
+|   dragStartEvent   |   EventEmitter\<DragEvent\>   |   开始拖动的 DragStart 事件   |      [基本用法](#基本用法)     |
+|   dragEndEvent   |   EventEmitter\<DragEvent\>   |   拖动结束的 DragEnd 事件   |      [基本用法](#基本用法)     |
+|   dropEndEvent   |   EventEmitter\<DragEvent\>   |   放置结束的 Drop 事件   |      [基本用法](#基本用法)     |
+
+### d-droppable 指令
+
+d-droppable 参数
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
+| ---- | ---- | ---- | ---- | --------- | --------- |
+|   dropScope   |   string | Array\<string\>   |   'default'   |   可选，限制 drop 的区域，对应 dragScope   |     [基本用法](#基本用法)      |           |
+
+d-droppable 事件
+
+| 事件 | 类型 | 说明 | 跳转 Demo |
+| ---- | ---- | ---- | --------- |
+|   dragEnterEvent   |   EventEmitter\<DragEvent\>   |   drag 元素进入的 dragenter 事件   |     [基本用法](#基本用法)      |
+|   dragOverEvent   |   EventEmitter\<DragEvent\>   |   drag 元素在 drop 区域上的 dragover 事件   |     [基本用法](#基本用法)      |
+|   dragLeaveEvent   |   EventEmitter\<DragEvent\>   |   drag 元素离开的 dragleave 事件   |     [基本用法](#基本用法)      |
+|   dropEvent   |   EventEmitter\<DropEvent\>   |   放置一个元素, 接收的事件，其中 nativeEvent 表示原生的 drop 事件，其他见定义注释   |      [基本用法](#基本用法)     |
+
+
-- 
Gitee


From ef2fec11403106a1408b53f0f4ad846d7c33484a Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Sun, 31 Oct 2021 12:00:39 +0800
Subject: [PATCH 2/4] feat(dragdrop): drag a draggable element to drop zone

---
 .../devui/dragdrop/src/draggable.directive.ts | 11 +++++----
 .../devui/dragdrop/src/droppable.directive.ts | 16 +++++++++----
 .../docs/components/dragdrop/index.md         | 24 +++++++++++++++----
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
index 4868750a..028bd48f 100644
--- a/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
+++ b/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
@@ -1,7 +1,10 @@
-// can export function.
 export default {
-  mounted(el: HTMLElement, binding: Record<string, unknown>): void {
-    console.log('draggable el:', el, el.textContent)
-    console.log('draggable binding:', binding)
+  mounted(el: HTMLElement): void {
+    el.setAttribute('draggable', 'true')
+
+    // dragstart/drag/dragend
+    el.addEventListener('dragstart', (event: DragEvent) => {
+      event.dataTransfer.setData('originId', el.id)
+    })
   },
 }
diff --git a/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts b/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts
index f072f295..d6061886 100644
--- a/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts
+++ b/packages/devui-vue/devui/dragdrop/src/droppable.directive.ts
@@ -1,7 +1,15 @@
-// can export function.
 export default {
-  mounted(el: HTMLElement, binding: Record<string, unknown>): void {
-    console.log('droppable el:', el, el.textContent)
-    console.log('droppable binding:', binding)
+  mounted(el: HTMLElement): void {
+    // dragenter/dragover/dragend/drop
+    el.addEventListener('dragover', (event: DragEvent) => {
+      event.preventDefault()
+    })
+
+    el.addEventListener('drop', (event: DragEvent) => {
+      const originId = event.dataTransfer.getData('originId')
+      const originNodeCopy = document.getElementById(originId).cloneNode(true)
+      const targetNode: any = event.target
+      targetNode.append(originNodeCopy)
+    })
   },
 }
diff --git a/packages/devui-vue/docs/components/dragdrop/index.md b/packages/devui-vue/docs/components/dragdrop/index.md
index 390bdd67..c82aa792 100644
--- a/packages/devui-vue/docs/components/dragdrop/index.md
+++ b/packages/devui-vue/docs/components/dragdrop/index.md
@@ -13,8 +13,11 @@
 ```vue
 <template>
   <div>
-    <div v-d-draggable>拖拽区</div>
-    <div v-d-droppable>放置区</div>
+    <div id="draggable-item" class="draggable-item" v-d-draggable="{
+      dragScope: 'default-css',
+      dragData: { item: 'item', parent: 'list1' },
+    }">拖拽区</div>
+    <div class="droppable-item" v-d-droppable>放置区</div>
   </div>
 </template>
 
@@ -30,8 +33,21 @@ export default defineComponent({
 })
 </script>
 
-<style>
-
+<style class="scss">
+.draggable-item {
+  padding: 0 16px;
+  height: 30px;
+  border: 1px solid #5e7ce0;
+  border: 1px solid var(--devui-brand,#5e7ce0);
+  color: #fff;
+  color: var(--devui-light-text,#fff);
+  margin-bottom: 5px;
+  line-height: 1.5;
+  background-color: #5e7ce0;
+  background-color: var(--devui-brand,#5e7ce0);
+  display: flex;
+  align-items: center;
+}
 </style>
 ```
 
-- 
Gitee


From 2c91aa599f82493e1482b7ea720b7c7a23f76120 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Sun, 31 Oct 2021 12:24:37 +0800
Subject: [PATCH 3/4] refactor(dragdrop): optimize style

---
 .../devui/dragdrop/src/draggable.directive.ts |  1 +
 .../docs/components/dragdrop/index.md         | 41 +++++++++++++++----
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
index 028bd48f..c53e3342 100644
--- a/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
+++ b/packages/devui-vue/devui/dragdrop/src/draggable.directive.ts
@@ -1,6 +1,7 @@
 export default {
   mounted(el: HTMLElement): void {
     el.setAttribute('draggable', 'true')
+    el.style.cursor = 'grab'
 
     // dragstart/drag/dragend
     el.addEventListener('dragstart', (event: DragEvent) => {
diff --git a/packages/devui-vue/docs/components/dragdrop/index.md b/packages/devui-vue/docs/components/dragdrop/index.md
index c82aa792..f37a25bf 100644
--- a/packages/devui-vue/docs/components/dragdrop/index.md
+++ b/packages/devui-vue/docs/components/dragdrop/index.md
@@ -12,12 +12,22 @@
 
 ```vue
 <template>
-  <div>
-    <div id="draggable-item" class="draggable-item" v-d-draggable="{
-      dragScope: 'default-css',
-      dragData: { item: 'item', parent: 'list1' },
-    }">拖拽区</div>
-    <div class="droppable-item" v-d-droppable>放置区</div>
+  <div class="dragdrop-card-container">
+    <div class="dragdrop-card">
+      <div class="dragdrop-card-header">Draggable Item</div>
+      <div class="dragdrop-card-block">
+        <div id="draggable-item" class="draggable-item" v-d-draggable="{
+          dragScope: 'default-css',
+          dragData: { item: 'item', parent: 'list1' },
+        }">VSCode</div>
+      </div>
+    </div>
+    <div class="dragdrop-card" v-d-droppable>
+      <div class="dragdrop-card-header">Drop Area</div>
+      <div class="dragdrop-card-block">
+
+      </div>
+    </div>
   </div>
 </template>
 
@@ -33,7 +43,24 @@ export default defineComponent({
 })
 </script>
 
-<style class="scss">
+<style>
+.dragdrop-card-container {
+  display: flex;
+}
+
+.dragdrop-card {
+  padding: 12px;
+  margin-right: 12px;
+  border: 1px solid #dfe1e6;
+  border: 1px solid var(--devui-dividing-line,#dfe1e6);
+}
+
+.dragdrop-card .dragdrop-card-header {
+  padding-bottom: 12px;
+  font-size: 12px;
+  font-size: var(--devui-font-size,12px);
+}
+
 .draggable-item {
   padding: 0 16px;
   height: 30px;
-- 
Gitee


From 55d002ef6783d92ec3e92142b66c532ece9c1b27 Mon Sep 17 00:00:00 2001
From: kagol <kagol@sina.com>
Date: Sun, 31 Oct 2021 12:42:24 +0800
Subject: [PATCH 4/4] fix: update status

---
 packages/devui-vue/devui/dragdrop/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devui-vue/devui/dragdrop/index.ts b/packages/devui-vue/devui/dragdrop/index.ts
index 9439e288..6ab57151 100644
--- a/packages/devui-vue/devui/dragdrop/index.ts
+++ b/packages/devui-vue/devui/dragdrop/index.ts
@@ -7,7 +7,7 @@ export { DraggableDirective, DroppableDirective }
 export default {
   title: 'Dragdrop 拖拽',
   category: '通用',
-  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '10%',
   install(app: App): void {
     app.directive('DDraggable', DraggableDirective)
     app.directive('DDroppable', DroppableDirective)
-- 
Gitee