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/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 71d00a191d..c29b053ff8 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,15 +26,14 @@ 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'){ + if (document.getElementById(dragId)?.dataset.parent === 'sortable-drop-area'){ // 说明此时是同源操作（不需要生成shadow） // sameOriginExchangeElementPosition(event, [...dropArea.children], dragId, dropArea); 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){ // 说明此时想要进行换位操作 @@ -42,24 +45,24 @@ 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; } // 判断鼠标是否处于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'; + document.getElementById(dragId).dataset.parent = 'sortable-drop-area'; } } }); // 主要用来移除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..eb5723b74b 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,17 @@ 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{ +// TODO: 这个方法参数太多，待优化 +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 +85,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 +113,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 +132,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)); } } } @@ -140,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; @@ -178,29 +188,28 @@ 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 !== 'shadow0611'){ - 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 (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 !== 'shadow0611'){ + 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('shadow0611')){ - dropArea.removeChild(document.getElementById('shadow0611')); + if (document.getElementById(SHADOW_ID)){ + dropArea.removeChild(document.getElementById(SHADOW_ID)); } dropArea.appendChild(createShadow(dragId)); }