From b9a5cbb0e2a7b7a5d8eb3c82235dc10255a51637 Mon Sep 17 00:00:00 2001 From: Kagol Date: Sun, 11 Sep 2022 18:57:24 +0800 Subject: [PATCH 1/2] refactor(dragdrop): extract const SHADOW_ID --- .../devui-vue/devui/dragdrop/src/const.ts | 1 + .../devui-vue/devui/dragdrop/src/constant.ts | 1 - .../devui/dragdrop/src/draggable-directive.ts | 4 +- .../devui/dragdrop/src/sortable-directive.ts | 21 ++++++---- .../devui-vue/devui/dragdrop/src/utils.ts | 41 +++++++++++-------- 5 files changed, 40 insertions(+), 28 deletions(-) create mode 100644 packages/devui-vue/devui/dragdrop/src/const.ts delete mode 100644 packages/devui-vue/devui/dragdrop/src/constant.ts diff --git a/packages/devui-vue/devui/dragdrop/src/const.ts b/packages/devui-vue/devui/dragdrop/src/const.ts new file mode 100644 index 0000000000..6c09b4639f --- /dev/null +++ b/packages/devui-vue/devui/dragdrop/src/const.ts @@ -0,0 +1 @@ +export const SHADOW_ID = 'devui-dragdrop-placeholder-shadow'; diff --git a/packages/devui-vue/devui/dragdrop/src/constant.ts b/packages/devui-vue/devui/dragdrop/src/constant.ts deleted file mode 100644 index 04d8438851..0000000000 --- a/packages/devui-vue/devui/dragdrop/src/constant.ts +++ /dev/null @@ -1 +0,0 @@ -export const shadowId = 'shadow0611'; diff --git a/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts index 414b8674d2..cded3aa3bd 100644 --- a/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts +++ b/packages/devui-vue/devui/dragdrop/src/draggable-directive.ts @@ -1,5 +1,5 @@ import { changeDragState, deleteInsertedSortableShadow } from './utils'; -import { shadowId } from './constant'; +import { SHADOW_ID } from './const'; export default { /** @@ -24,7 +24,7 @@ export default { // dragstart/drag/dragend el.addEventListener('drag', () => { changeDragState(el, el.id, 'true', 'true', 'false', 'false', 'false', 'true'); - if (binding.instance.$root.dropElement && document.getElementById(shadowId)){ + if (binding.instance.$root.dropElement && document.getElementById(SHADOW_ID)){ deleteInsertedSortableShadow(binding.instance.$root.dropElement); // 如何让它仅执行1次？ binding.instance.$root.dropElement = null; } diff --git a/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts b/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts index 71d00a191d..44246475b2 100644 --- a/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts +++ b/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts @@ -1,6 +1,10 @@ -import { shadowId } from './constant'; -import { changeDragState, createInsertSortableShadow, insertDragElement, judgeMouseIsInSortableArea, - exchangeShadowPosition, sameOriginExchangeElementPosition } from './utils'; +import { SHADOW_ID } from './const'; +import { + createInsertSortableShadow, + judgeMouseIsInSortableArea, + exchangeShadowPosition, + sameOriginExchangeElementPosition, +} from './utils'; export default { @@ -22,7 +26,6 @@ export default { const self = el; el.addEventListener('dragover', function (event: DragEvent){ event.preventDefault(); - const dropArea = [...el.childNodes][1]; const dragId = binding.instance.$root.identity; if (document.getElementById(dragId)?.dataset.parent === 'sort-drop'){ // 说明此时是同源操作（不需要生成shadow） @@ -30,7 +33,7 @@ export default { return; } // 需要判定是否存在阴影，否则会出现严重的抖动情况 - if (!document.getElementById('shadow0611') && [...self.childNodes[1].children].length === 0){ + if (!document.getElementById(SHADOW_ID) && [...self.childNodes[1].children].length === 0){ createInsertSortableShadow([...self.childNodes][1], event, dragId); } else if ([...self.childNodes[1].children].length >= 1){ // 说明此时想要进行换位操作 @@ -48,8 +51,8 @@ export default { return; } // 判断鼠标是否处于drop区域 - if (document.getElementById(shadowId)){ - dropArea.replaceChild(document.getElementById(dragId), document.getElementById(shadowId)); + if (document.getElementById(SHADOW_ID)){ + dropArea.replaceChild(document.getElementById(dragId), document.getElementById(SHADOW_ID)); if (document.getElementById(dragId)){ document.getElementById(dragId).dataset.parent = 'sort-drop'; } @@ -58,8 +61,8 @@ export default { // 主要用来移除shadow el.addEventListener('dragleave', function (event: Event){ const dropArea = [...el.childNodes][1]; - if (document.getElementById(shadowId) && !judgeMouseIsInSortableArea(event, el)){ - dropArea.removeChild(document.getElementById(shadowId)); + if (document.getElementById(SHADOW_ID) && !judgeMouseIsInSortableArea(event, el)){ + dropArea.removeChild(document.getElementById(SHADOW_ID)); } }); } diff --git a/packages/devui-vue/devui/dragdrop/src/utils.ts b/packages/devui-vue/devui/dragdrop/src/utils.ts index dd09651a33..2534b32eaf 100644 --- a/packages/devui-vue/devui/dragdrop/src/utils.ts +++ b/packages/devui-vue/devui/dragdrop/src/utils.ts @@ -1,4 +1,4 @@ -import { shadowId } from './constant'; +import { SHADOW_ID } from './const'; /** * @@ -24,7 +24,7 @@ function getElementStyle (id: string, styleName: string): string { */ function createShadow (originId: string): HTMLElement { const shadow = document.createElement('div'); - shadow.id = shadowId; + shadow.id = SHADOW_ID; shadow.style.background = 'rgb(206, 215, 255)'; shadow.style.width = getElementStyle(originId, 'width'); shadow.style.height = '20px'; @@ -44,7 +44,16 @@ function createShadow (originId: string): HTMLElement { * @description * 改变拖拽元素相应的状态 */ -function changeDragState (el: string, originId: string, dragStart: string, drag: string, dragover: string, drop: string, shouldCreateShadow: string, dragFlag: string): void{ +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; @@ -75,14 +84,14 @@ function computeCompareElementHeight (compareElement: HTMLCollection): unknown{ function createInsertSortableShadow (sortDropArea: unknown, mouseObject: unknown, originId: string): void { const sortDropAreaArr: Array = [...sortDropArea.children]; if (sortDropAreaArr.length === 0){ - if (!document.getElementById(shadowId)){ + if (!document.getElementById(SHADOW_ID)){ 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; + document.getElementById(SHADOW_ID) ? sortDropArea.removeChild(document.getElementById(SHADOW_ID)) : null; if (Math.floor(mouseObject.clientY) <= (Math.floor(compareHeight / 2) + sortDropAreaArr[index].getBoundingClientRect().top)){ sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index]); break; @@ -103,7 +112,7 @@ function createInsertSortableShadow (sortDropArea: unknown, mouseObject: unknown */ function insertDragElement (dropAreaContainer: HTMLCollection, dragId: string, mouseObject: MouseEvent): void { for (let index = 0; index < [...dropAreaContainer.children].length; index++){ - if (index == [...dropAreaContainer.children].length-1){ + if (index === [...dropAreaContainer.children].length-1){ dropAreaContainer.appendChild(document.getElementById(dragId)); break; } @@ -122,9 +131,9 @@ function insertDragElement (dropAreaContainer: HTMLCollection, dragId: string, m */ function deleteInsertedSortableShadow (dropSortArea: unknown): void{ if (dropSortArea){ - if (document.getElementById(shadowId)){ - if (dropSortArea.contains(document.getElementById(shadowId))){ - dropSortArea.removeChild(document.getElementById(shadowId)); + if (document.getElementById(SHADOW_ID)){ + if (dropSortArea.contains(document.getElementById(SHADOW_ID))){ + dropSortArea.removeChild(document.getElementById(SHADOW_ID)); } } } @@ -184,12 +193,12 @@ function sameOriginExchangeElementPosition (mouse: Event, comparedArr: Array, dr function exchangeShadowPosition (mouse: Event, comparedArr: Array, dragId: string, dropArea: Element): void{ for (let index = 0; index < comparedArr.length; index++){ // 遇到shadow，直接跳过 - if (comparedArr[index]?.id !== 'shadow0611'){ + if (comparedArr[index]?.id !== SHADOW_ID){ if (Math.floor(mouse.clientY) <= (comparedArr[index].getBoundingClientRect().top)){ console.log('------'); - if (comparedArr[index-1]?.id !== 'shadow0611'){ - if (document.getElementById('shadow0611')){ - dropArea.removeChild(document.getElementById('shadow0611')); + if (comparedArr[index-1]?.id !== SHADOW_ID){ + if (document.getElementById(SHADOW_ID)){ + dropArea.removeChild(document.getElementById(SHADOW_ID)); } dropArea.insertBefore(createShadow(dragId), comparedArr[index]); break; @@ -197,10 +206,10 @@ function exchangeShadowPosition (mouse: Event, comparedArr: Array, dragId: strin } if (Math.floor(mouse.clientY) > ( comparedArr[comparedArr.length - 1].getBoundingClientRect().top)){ - if (index === comparedArr.length - 1 && comparedArr[index]?.id !== 'shadow0611'){ + if (index === comparedArr.length - 1 && comparedArr[index]?.id !== SHADOW_ID){ // 如果存在shadow，则清除 - if (document.getElementById('shadow0611')){ - dropArea.removeChild(document.getElementById('shadow0611')); + if (document.getElementById(SHADOW_ID)){ + dropArea.removeChild(document.getElementById(SHADOW_ID)); } dropArea.appendChild(createShadow(dragId)); } From e41e2dff950c55235c380fd12b2339ff8155551b Mon Sep 17 00:00:00 2001 From: Kagol Date: Sun, 11 Sep 2022 19:39:02 +0800 Subject: [PATCH 2/2] refactor(dragdrop): Optimize the code according to the review opinion --- .../devui/dragdrop/src/droppable-directive.ts | 4 +-- .../devui/dragdrop/src/sortable-directive.ts | 6 ++-- .../devui-vue/devui/dragdrop/src/utils.ts | 32 +++++++++---------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts index 54dbc63734..d880e5bbdc 100644 --- a/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts +++ b/packages/devui-vue/devui/dragdrop/src/droppable-directive.ts @@ -25,8 +25,8 @@ export default { el.addEventListener('drop', (event: DragEvent) => { event.preventDefault(); const dragId = binding.instance.$root.identity; - document.getElementById(dragId).dataset.parent = 'without-drop'; - if (document.getElementById(dragId).dataset.dropArea == document.getElementById(dragId).dataset.dragArea){ + document.getElementById(dragId).dataset.parent = 'not-sortable-drop-area'; + if (document.getElementById(dragId).dataset.dropArea === document.getElementById(dragId).dataset.dragArea){ return; } // 如何定义可放置区域这个问题得商榷一下 diff --git a/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts b/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts index 44246475b2..c29b053ff8 100644 --- a/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts +++ b/packages/devui-vue/devui/dragdrop/src/sortable-directive.ts @@ -27,7 +27,7 @@ export default { el.addEventListener('dragover', function (event: DragEvent){ event.preventDefault(); const dragId = binding.instance.$root.identity; - if (document.getElementById(dragId)?.dataset.parent === 'sort-drop'){ + if (document.getElementById(dragId)?.dataset.parent === 'sortable-drop-area'){ // 说明此时是同源操作（不需要生成shadow） // sameOriginExchangeElementPosition(event, [...dropArea.children], dragId, dropArea); return; @@ -45,7 +45,7 @@ export default { // 获取可放置区域 const dropArea = [...el.childNodes][1]; const dragId = binding.instance.$root.identity; - if (document.getElementById(dragId)?.dataset.parent === 'sort-drop'){ + if (document.getElementById(dragId)?.dataset.parent === 'sortable-drop-area'){ // 说明是同源（不产生shadow，直接替换） sameOriginExchangeElementPosition(event, [...dropArea.children], dragId, dropArea); return; @@ -54,7 +54,7 @@ export default { if (document.getElementById(SHADOW_ID)){ dropArea.replaceChild(document.getElementById(dragId), document.getElementById(SHADOW_ID)); if (document.getElementById(dragId)){ - document.getElementById(dragId).dataset.parent = 'sort-drop'; + document.getElementById(dragId).dataset.parent = 'sortable-drop-area'; } } }); diff --git a/packages/devui-vue/devui/dragdrop/src/utils.ts b/packages/devui-vue/devui/dragdrop/src/utils.ts index 2534b32eaf..eb5723b74b 100644 --- a/packages/devui-vue/devui/dragdrop/src/utils.ts +++ b/packages/devui-vue/devui/dragdrop/src/utils.ts @@ -44,6 +44,7 @@ function createShadow (originId: string): HTMLElement { * @description * 改变拖拽元素相应的状态 */ +// TODO: 这个方法参数太多，待优化 function changeDragState ( el: string, originId: string, @@ -149,12 +150,12 @@ function deleteInsertedSortableShadow (dropSortArea: unknown): void{ function judgeMouseIsInSortableArea (mouse: MouseEvent, sortableArea: Element): boolean{ const { clientX, clientY } = mouse; // 获取元素的位置 - const eleLeft1 = sortableArea.getBoundingClientRect().left; - const eleLeft2 = sortableArea.getBoundingClientRect().right; - const eletop1 = sortableArea.getBoundingClientRect().top; - const eletop2 = sortableArea.getBoundingClientRect().bottom; + const eleLeft = sortableArea.getBoundingClientRect().left; + const eleRight = sortableArea.getBoundingClientRect().right; + const eleTop = sortableArea.getBoundingClientRect().top; + const eleBottom = sortableArea.getBoundingClientRect().bottom; - if ((clientX > eleLeft1) && (clientX < eleLeft2) && (clientY > eletop1) && (clientY < eletop2)){ + if ((clientX > eleLeft) && (clientX < eleRight) && (clientY > eleTop) && (clientY < eleBottom)){ return true; } else { return false; @@ -187,26 +188,25 @@ function sameOriginExchangeElementPosition (mouse: Event, comparedArr: Array, dr /** * * @param mouse 当前鼠标对象 - * @param comparedArr 待比较的数组 + * @param dropAreaElements 放置区域的元素 * @description */ -function exchangeShadowPosition (mouse: Event, comparedArr: Array, dragId: string, dropArea: Element): void{ - for (let index = 0; index < comparedArr.length; index++){ +// TODO: 该方法 if 嵌套太深，待优化 +function exchangeShadowPosition (mouse: Event, dropAreaElements: Array, dragId: string, dropArea: Element): void{ + for (let index = 0; index < dropAreaElements.length; index++){ // 遇到shadow，直接跳过 - if (comparedArr[index]?.id !== SHADOW_ID){ - if (Math.floor(mouse.clientY) <= (comparedArr[index].getBoundingClientRect().top)){ - console.log('------'); - if (comparedArr[index-1]?.id !== SHADOW_ID){ + if (dropAreaElements[index]?.id !== SHADOW_ID){ + if (Math.floor(mouse.clientY) <= (dropAreaElements[index].getBoundingClientRect().top)){ + if (dropAreaElements[index-1]?.id !== SHADOW_ID){ if (document.getElementById(SHADOW_ID)){ dropArea.removeChild(document.getElementById(SHADOW_ID)); } - dropArea.insertBefore(createShadow(dragId), comparedArr[index]); + dropArea.insertBefore(createShadow(dragId), dropAreaElements[index]); break; } } - if (Math.floor(mouse.clientY) > ( - comparedArr[comparedArr.length - 1].getBoundingClientRect().top)){ - if (index === comparedArr.length - 1 && comparedArr[index]?.id !== SHADOW_ID){ + if (Math.floor(mouse.clientY) > dropAreaElements[dropAreaElements.length - 1].getBoundingClientRect().top){ + if (index === dropAreaElements.length - 1 && dropAreaElements[index]?.id !== SHADOW_ID){ // 如果存在shadow，则清除 if (document.getElementById(SHADOW_ID)){ dropArea.removeChild(document.getElementById(SHADOW_ID));