From fa0ebf4aec1105c5c56ecd2f99e5e7bdfb03e977 Mon Sep 17 00:00:00 2001 From: Carlos Jorge Rodriguez Date: Thu, 13 Feb 2025 18:57:13 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20bug=20of=20elements=20dra?= =?UTF-8?q?gged=20in=20another=20droppable=20and=20drop=20outside=20this?= =?UTF-8?q?=20droppable=20have=20wrong=20drop=20position?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ExampleGroupOflist.vue | 1 + src/composables/useDraggable.ts | 24 ++++++----- src/utils/tempChildren.ts | 5 ++- .../translate/GetTranslateBeforeDropping.ts | 1 - src/utils/useConfig.ts | 41 ++++++++++++++----- 5 files changed, 48 insertions(+), 24 deletions(-) diff --git a/my-test-examples/src/components/ExampleGroupOflist.vue b/my-test-examples/src/components/ExampleGroupOflist.vue index 02aa16d..e4848ad 100644 --- a/my-test-examples/src/components/ExampleGroupOflist.vue +++ b/my-test-examples/src/components/ExampleGroupOflist.vue @@ -121,6 +121,7 @@ const { id } = defineProps<{ background-color: aliceblue; height: 400px; grid-area: vertical; + margin-top: 1rem; } .scrolled-list { padding-block: 20px; diff --git a/src/composables/useDraggable.ts b/src/composables/useDraggable.ts index d719ef0..31ddceb 100644 --- a/src/composables/useDraggable.ts +++ b/src/composables/useDraggable.ts @@ -174,7 +174,7 @@ export default function useDraggable( currentDroppableConfig.value ); }; - const { updateConfig, currentDroppableConfig, getCurrentConfig, isOutsideOfDroppable } = + const { updateConfig, currentDroppableConfig, initialDroppableConfig ,getCurrentConfig, isOutsideOfDroppable } = useConfig(childRef, droppableGroupClass, parent, setTransformDragEvent); function toggleDroppableClass(isOutside:boolean){ if (!currentDroppableConfig.value) { @@ -196,15 +196,16 @@ export default function useDraggable( if (!currentElement) { return; } - toggleDroppableClass(isOutsideOfDroppable(event)) + const isOutside = isOutsideOfDroppable(event) + toggleDroppableClass(isOutside) if (draggingState.value === DraggingState.START_DRAGGING) { startDragging(event); } else if (draggingState.value === DraggingState.DRAGING) { - updateTempChildren(); + updateTempChildren(isOutside); setTransformEvent(event); } }; - const updateTempChildren = () => { + const updateTempChildren = (isOutside: boolean = true) => { if (!currentDroppableConfig.value) { return; } @@ -213,8 +214,12 @@ export default function useDraggable( droppable, parent, droppableGroupClass, - animationDuration + animationDuration, + isOutside ); + if (isOutside) { + return + } addTempChild( childRef.value, parent, @@ -294,7 +299,7 @@ export default function useDraggable( toggleDroppableClass(true); const convertedEvent = convetEventToDragMouseTouchEvent(event); clearTimeout(delayTimeout.value); - onDropDraggingEvent(); + onDropDraggingEvent(isOutsideOfDroppable(convertedEvent, false)); document.removeEventListener(moveEvent, handlerMousemove); updateConfig(convertedEvent); const currentConfig = getCurrentConfig(convertedEvent); @@ -355,7 +360,7 @@ export default function useDraggable( const onScrollEvent = () => { setTransformDragEvent(); }; - const onDropDraggingEvent = () => { + const onDropDraggingEvent = (isOutsideAllDroppables: boolean) => { if (draggingState.value !== DraggingState.DRAGING) { draggingState.value = DraggingState.NOT_DRAGGING; return; @@ -371,7 +376,7 @@ export default function useDraggable( element, START_DROP_EVENT, windowScroll.value, - currentDroppableConfig.value, + isOutsideAllDroppables? initialDroppableConfig.value: currentDroppableConfig.value, index ); }; @@ -455,6 +460,5 @@ export default function useDraggable( // TODO: use semantic-realese https://medium.comr/@davidkelley87/using-semantic-release-for-npm-libraries-with-github-actions-234461235fa7 ///~https://github.com/iamstevendao/vue-tel-input/blob/main/.github/workflows/deploy.yml - // TODO: add warning on docs with tranform animation -// TODO: fix bug of elements dragged in another droppable and drop outside this droppable have wrong drop position \ No newline at end of file +// TODO: dragging fast give wrong drop position \ No newline at end of file diff --git a/src/utils/tempChildren.ts b/src/utils/tempChildren.ts index 76da31a..9d3cc51 100644 --- a/src/utils/tempChildren.ts +++ b/src/utils/tempChildren.ts @@ -124,7 +124,8 @@ export const removeTempChildrens = ( droppable: HTMLElement, parent: HTMLElement, droppableGroupClass: string | null, - animationDuration: number + animationDuration: number, + draggedElementIsOutside: boolean = true ) => { if (!droppableGroupClass) { return; @@ -135,7 +136,7 @@ export const removeTempChildrens = ( children.forEach((tempChild) => { const childParent = tempChild.parentElement; - if (childParent?.isSameNode(parent) || childParent?.isSameNode(droppable)) { + if (!draggedElementIsOutside && (childParent?.isSameNode(parent) || childParent?.isSameNode(droppable))) { return; } const tempChildElement = tempChild as HTMLElement; diff --git a/src/utils/translate/GetTranslateBeforeDropping.ts b/src/utils/translate/GetTranslateBeforeDropping.ts index 9d14c72..8b1cb2b 100644 --- a/src/utils/translate/GetTranslateBeforeDropping.ts +++ b/src/utils/translate/GetTranslateBeforeDropping.ts @@ -58,7 +58,6 @@ export default function getTranslateBeforeDropping( let height = 0; let width = 0; const isGroupDropping = Boolean(sourceIndex < 0 && draggable); - if (sourceIndex === targetIndex && !isGroupDropping) { return addScrollToTranslate( { height, width }, diff --git a/src/utils/useConfig.ts b/src/utils/useConfig.ts index e7104f9..dd74463 100644 --- a/src/utils/useConfig.ts +++ b/src/utils/useConfig.ts @@ -22,17 +22,36 @@ export function useConfig( .filter((element) => !element.isSameNode(draggable)); } const currentDroppableConfig = ref>(); + const initialDroppableConfig = ref|undefined>(parent?ConfigHandler.getConfig(parent):undefined); + function getElementBelow( + currentElement: HTMLElement, + event: DragMouseTouchEvent, + hiddenDraggable: boolean = true){ + function getElementBelow(){ + const [elementBelow] = getDraggableAncestor( + event.clientX, + event.clientY, + currentElement + ); + return elementBelow + } + let elementBelow = null + if (hiddenDraggable) { + currentElement.hidden = true; + elementBelow = getElementBelow() + currentElement.hidden = false; + } + else{ + elementBelow = getElementBelow() + } + return elementBelow + } function getCurrentDroppable( currentElement: HTMLElement, - event: DragMouseTouchEvent + event: DragMouseTouchEvent, + hiddenDraggable: boolean = true ) { - currentElement.hidden = true; - const [elementBelow] = getDraggableAncestor( - event.clientX, - event.clientY, - currentElement - ); - currentElement.hidden = false; + const elementBelow = getElementBelow(currentElement, event, hiddenDraggable) if (!droppableGroupClass || !elementBelow) { return; } @@ -88,12 +107,12 @@ export function useConfig( function updateConfig(event: DragMouseTouchEvent) { currentDroppableConfig.value = getCurrentConfig(event); } - function isOutsideOfDroppable(event: DragMouseTouchEvent){ + function isOutsideOfDroppable(event: DragMouseTouchEvent, hiddenDraggable: boolean = true){ const currentElement = childRef.value; if (!currentElement) { return true; } - return !Boolean(getCurrentDroppable(currentElement,event)) + return !Boolean(getCurrentDroppable(currentElement, event, hiddenDraggable)) } - return { currentDroppableConfig, updateConfig, getCurrentConfig, isOutsideOfDroppable }; + return { currentDroppableConfig, initialDroppableConfig, updateConfig, getCurrentConfig, isOutsideOfDroppable }; }