🐞 fix: bug of elements dragged in another droppable and drop outside …

…this droppable have wrong drop position
carlosjorger · Feb 14, 2025 · fa0ebf4 · fa0ebf4
1 parent d162d6f
commit fa0ebf4
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 24 deletions.
diff --git 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
@@ -174,7 +174,7 @@ export default function useDraggable<T>(
       currentDroppableConfig.value
     );
   };
-  const { updateConfig, currentDroppableConfig, getCurrentConfig, isOutsideOfDroppable } =
+  const { updateConfig, currentDroppableConfig, initialDroppableConfig ,getCurrentConfig, isOutsideOfDroppable } =
     useConfig<T>(childRef, droppableGroupClass, parent, setTransformDragEvent);
   function toggleDroppableClass(isOutside:boolean){
     if (!currentDroppableConfig.value) {
@@ -196,15 +196,16 @@ export default function useDraggable<T>(
     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<T>(
       droppable,
       parent,
       droppableGroupClass,
-      animationDuration
+      animationDuration,
+      isOutside
     );
+    if (isOutside) {
+      return
+    }
     addTempChild(
       childRef.value,
       parent,
@@ -294,7 +299,7 @@ export default function useDraggable<T>(
       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<T>(
   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<T>(
       element,
       START_DROP_EVENT,
       windowScroll.value,
-      currentDroppableConfig.value,
+      isOutsideAllDroppables? initialDroppableConfig.value: currentDroppableConfig.value,
       index
     );
   };
@@ -455,6 +460,5 @@ export default function useDraggable<T>(
 
 // 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
+// TODO: dragging fast give wrong drop position
diff --git 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
@@ -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
@@ -22,17 +22,36 @@ export function useConfig<T>(
       .filter((element) => !element.isSameNode(draggable));
   }
   const currentDroppableConfig = ref<DroppableConfig<T>>();
+  const initialDroppableConfig = ref<DroppableConfig<T>|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<T>(
   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 };
 }