实现dragdrop指令基础用法

packages/devui-vue/devui/dragdrop/index.ts

@@ -1,8 +1,9 @@
 import type { App } from 'vue'
 import DraggableDirective from './src/draggable-directive'
 import DroppableDirective from './src/droppable-directive'
+import SortableDirective from './src/sortable-directive'
 
-export { DraggableDirective, DroppableDirective }
+export { DraggableDirective, DroppableDirective, SortableDirective }
 
 export default {
   title: 'Dragdrop 拖拽',
@@ -11,5 +12,6 @@ export default {
   install(app: App): void {
     app.directive('DDraggable', DraggableDirective)
     app.directive('DDroppable', DroppableDirective)
+    app.directive('DSortable', SortableDirective)
   }
 }

packages/devui-vue/devui/dragdrop/src/constant.ts

@@ -0,0 +1 @@
+export const shadowId = 'shadow0611'

packages/devui-vue/devui/dragdrop/src/draggable-directive.ts

@@ -1,11 +1,41 @@
+import { changeDragState, deleteInsertedSortableShadow } from './utils'
+import { shadowId } from './constant'
+
 export default {
-  mounted(el: HTMLElement): void {
-    el.setAttribute('draggable', 'true')
+  /**
+   * 
+   * @param el 
+   * @description
+   *   1、绑定该指令的element将会具备拖拽能力
+   *   2、为各元素进行初始化配置
+   *      2.1、dragFlag:      是否处于拖拽中
+   *      2.2、dragOverFlag： 是否处于可放置区域
+   * 
+   *   1、整体思路
+   *      1.1、为每个绑定drag指令的元素维护状态
+   *        1.1.1、状态集合：dragStart、drag、dragover、drop、shouldCreateShadow
+   * 
+   *      1.2、进入drop区域后，确保drop区域能够获取正在进行drag的元素
+   */
+  mounted(el: HTMLElement, binding: unknown): void {
+    el.setAttribute('draggable', 'true');
     el.style.cursor = 'grab'
 
     // dragstart/drag/dragend
-    el.addEventListener('dragstart', (event: DragEvent) => {
-      event.dataTransfer.setData('originId', el.id)
-    })
+    el.addEventListener('drag', () => {
+      changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false', 'true')
+      if (binding.instance.$root.dropElement && document.getElementById(shadowId)){
+        deleteInsertedSortableShadow(binding.instance.$root.dropElement)     // 如何让它仅执行1次？
+        binding.instance.$root.dropElement = null
+      }
+    }, false)
+
+    // dragStart事件为每个绑定元素进行初始化
+    el.addEventListener('dragstart', ()=>{
+      // el  or  binding.instance  or  vnode.context
+      changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false', 'false')
+      binding.instance.$root.identity = el.id
+      el.dataset.dragArea = el.parentNode.className
+    }, false)
   },
 }

packages/devui-vue/devui/dragdrop/src/droppable-directive.ts

@@ -1,15 +1,49 @@
+import { changeDragState } from './utils'
+
 export default {
-  mounted(el: HTMLElement): void {
-    // dragenter/dragover/dragend/drop
+  /**
+   * 
+   * @param el 
+   * @description
+   *   dragOver:
+   *        1、生成与清除阴影的时机
+   *           1.1、生成时机（只生成一次）： dragFlag === true && dragOverFlag === true
+   *   drop: 
+   *        1、完成放的操作
+   *           1.1、清除相应的阴影
+   */
+  mounted(el: HTMLElement, binding:unknown): void {
+    // dragenter/dragover/dragend/drop 
     el.addEventListener('dragover', (event: DragEvent) => {
       event.preventDefault()
-    })
+      const dragId = binding.instance.$root.identity
+      changeDragState(document.getElementById(dragId), dragId, 'true', 'false', 'true', 'false', 'false', 'false')
+      document.getElementById(dragId).dataset.dropArea = [...el.childNodes][1].className
+    }, false)
 
+    // 新增两个标识解决战斗，即dragStart区域、drop区域、sortableDrop区域
     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)
+      event.preventDefault()
+      const dragId = binding.instance.$root.identity
+      if (document.getElementById(dragId).dataset.dropArea == document.getElementById(dragId).dataset.dragArea){
+          return 
+      }
+      // 如何定义可放置区域这个问题得商榷一下
+      const childrenArr = [...Array.from(el.children)[1].children]
+      if (childrenArr.length > 0){
+        for (let index = 0; index < childrenArr.length; index++){
+          const childrenYRange = childrenArr[index].getBoundingClientRect().top + childrenArr[index].offsetHeight / 2
+          if (parseFloat(event.clientY) < parseFloat(childrenYRange)){
+            el.children[1].insertBefore(document.getElementById(dragId), childrenArr[index])
+            break
+          }
+          if (index === childrenArr.length-1){
+            el.children[1].appendChild(document.getElementById(dragId))
+          }
+        }
+      }else {
+        el.childNodes[1].appendChild(document.getElementById(dragId))
+      }
     })
   },
 }

packages/devui-vue/devui/dragdrop/src/sortable-directive.ts

@@ -0,0 +1,48 @@
+import { shadowId } from './constant'
+import { changeDragState, createInsertSortableShadow, insertDragElement } from './utils'
+
+
+export default {
+    /**
+     * 
+     * @param el 
+     * @description
+     *     此命令用于将元素变为可放置的元素并且支持排序
+     *     dragover:
+     *               1、说明此时进入可排序放置的区域
+     *               2、此时应该生成相应的可排序的shadow
+     *     drop:
+     *               1、可放置区域里如果没有拖拽元素，直接放置
+     *               2、可放置区域里如果有其他的可拖拽元素，需要对比放置到正确的位置上
+     */
+    mounted(el: HTMLElement, binding:unknown):void {
+        el.addEventListener('dragover', function (event: DragEvent){
+            event.preventDefault()
+            const targetNode: any = event.target;
+            const dragId = binding.instance.$root.identity
+            if (!binding.instance.$root.dropElement){
+                binding.instance.$root.dropElement = [...el.childNodes][1]
+            }
+            changeDragState(document.getElementById(binding.instance.$root.identity), binding.instance.$root.identity, 'true', 'false', 'true', 'false', 'true', 'false')
+            const { dragover, shouldCreateShadow } = document.getElementById(dragId).dataset
+            if (dragover == 'true'){
+                if (shouldCreateShadow == 'true'){
+                    createInsertSortableShadow([...targetNode.children][1], event, dragId)
+                }
+            }
+
+        })
+        el.addEventListener('drop', function (event: DragEvent){
+            // 获取可放置区域
+            const dropArea = [...el.childNodes][1]
+            const dragId = binding.instance.$root.identity
+            dropArea.removeChild(document.getElementById(shadowId))
+            if ([...dropArea.childNodes].length == 0){
+                dropArea.appendChild(document.getElementById(dragId))
+            }else {
+                insertDragElement(dropArea, dragId, event)
+            }
+            changeDragState(document.getElementById(dragId), dragId, 'false', 'false', 'false', 'true', 'false', 'false')
+        })
+    }
+}

packages/devui-vue/devui/dragdrop/src/utils.ts

@@ -0,0 +1,143 @@
+import { shadowId } from './constant'
+
+/**
+ * 
+ * @param id 
+ * @descriprion
+ *    根据id获取非内联样式元素的样式
+ */
+function getElementStyle (id: string, styleName: string):string {
+    return document.getElementById(id).currentStyle ? document.getElementById(id).currentStyle[styleName] : window.getComputedStyle(
+        document.getElementById(id),
+        styleName
+    )
+}
+
+/**
+ * 
+ * @param originId 
+ * @description
+ *    根据拖拽的id生成相应的阴影
+ *    如何生成shadow？
+ *    情况一： dragable   ->    drop without sortable
+ *    情况二： anything   ->    drop without anything
+ */
+function createShadow (originId:string):HTMLElement {
+    const shadow = document.createElement('div');
+    shadow.id = shadowId
+    shadow.style.background = 'rgb(206, 215, 255)'
+    shadow.style.width = getElementStyle(originId, 'width')
+    shadow.style.height = '20px'
+    return shadow
+}
+
+/**
+ * 
+ * @param el 
+ * @param originId 
+ * @param dragStart 
+ * @param drag 
+ * @param dragover 
+ * @param drop 
+ * @param shouldCreateShadow 
+ * @param dragFlag
+ * @description
+ *    改变拖拽元素相应的状态 
+ */
+function changeDragState (el:string, originId:string, dragStart:string, drag:string, dragover:string, drop:string, shouldCreateShadow:string, dragFlag: string): void{
+    el.dataset.originId = originId
+    el.dataset.dragStart = dragStart
+    el.dataset.dragover = dragover
+    el.dataset.drop = drop
+    el.dataset.shouldCreateShadow = shouldCreateShadow
+    el.dataset.dragFlag = dragFlag
+}
+
+/**
+ * 
+ * @param compareElement 
+ * @returns 
+ * @description
+ *     计算可对比元素的高度
+ */
+function computeCompareElementHeight (compareElement: HTMLCollection): unknown{
+    return compareElement.getBoundingClientRect().top + Math.floor(compareElement.offsetHeight / 2)
+}
+
+/**
+ * 
+ * @param sortDropArea 
+ * @param mouseObject 
+ *    1、首先确认可放置区域
+ *    2、确保每个元素只生成一次shadow
+ *    3、
+ */
+function createInsertSortableShadow (sortDropArea: unknown, mouseObject: unknown, originId: string):void {
+    const sortDropAreaArr: Array = [...sortDropArea.children]
+    if (sortDropAreaArr.length == 0){
+        if (!document.getElementById(shadowId)){
+            const shadowElement = createShadow(originId)
+            sortDropArea.appendChild(shadowElement)
+        }
+    }else {
+        for (let index = 0; index < sortDropAreaArr.length; index++){
+            const compareHeight = computeCompareElementHeight(sortDropAreaArr[index])
+            document.getElementById(shadowId) ? sortDropArea.removeChild(document.getElementById(shadowId)) : null
+            if (index == sortDropAreaArr.length-1){
+                sortDropArea.appendChild(createShadow(originId))
+                break
+            }
+            if (Math.floor(mouseObject.clientY)<= compareHeight){
+                sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index])
+                break
+            }
+        }
+    }
+}
+
+/**
+ * 
+ * @param dropAreaContainer 
+ * @param dragId 
+ * @param mouseObject 
+ * @description
+ *    向sortable区域插入拖拽元素
+ */
+function insertDragElement (dropAreaContainer: HTMLCollection, dragId: string, mouseObject: MouseEvent): void {
+    for (let index = 0; index < [...dropAreaContainer.children].length; index++){
+        if (index == [...dropAreaContainer.children].length-1){
+            dropAreaContainer.appendChild(document.getElementById(dragId))
+            break
+        }
+        if (Math.floor(mouseObject.clientY) <= computeCompareElementHeight([...dropAreaContainer.children][index])){
+            dropAreaContainer.insertBefore(document.getElementById(dragId), [...dropAreaContainer.children][index])
+            break
+        }
+    }
+}
+
+/**
+ * 
+ * @param dropSortArea 
+ * @description
+ *    删除可排序区域中的shadow
+ */
+function deleteInsertedSortableShadow (dropSortArea: unknown):void{
+    if (dropSortArea){
+        if (document.getElementById(shadowId)){
+            if (dropSortArea.contains(document.getElementById(shadowId))){
+                dropSortArea.removeChild(document.getElementById(shadowId))
+            }
+        }
+    }
+}
+
+
+export {
+    createShadow,
+    changeDragState,
+    createInsertSortableShadow,
+    deleteInsertedSortableShadow,
+    computeCompareElementHeight,
+    insertDragElement
+}

packages/devui-vue/docs/components/dragdrop/index.md

@@ -15,19 +15,27 @@
   <div class="dragdrop-card-container">
     <div class="dragdrop-card">
       <div class="dragdrop-card-header">Draggable Item</div>
-      <div class="dragdrop-card-block">
+      <div class="dragdrop-card-block drag">
         <div id="draggable-item" class="draggable-item" v-d-draggable="{
           dragScope: 'default-css',
           dragData: { item: 'item', parent: 'list1' },
         }">VSCode</div>
+        <div id="draggable-item2" class="draggable-item" v-d-draggable="{
+          dragScope: 'default-css',
+          dragData: { item: 'item', parent: 'list1' },
+        }">Sublime</div>
       </div>
     </div>
     <div class="dragdrop-card" v-d-droppable>
       <div class="dragdrop-card-header">Drop Area</div>
-      <div class="dragdrop-card-block">
+      <div class="dragdrop-card-block droppable">
 
       </div>
     </div>
+    <div class="dragdrop-card" v-d-sortable>
+      <div class="dragdrop-card-header">Drop Area With Sortable</div>
+      <div class="dragdrop-card-block"></div>
+    </div>
   </div>
 </template>