fixes issue where dragend over document body was not being prevented …

…properly
formkit · Sep 5, 2024 · c012d3e · c012d3e
1 parent c7b20cb
commit c012d3e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -137,6 +137,10 @@ export function dragAndDrop<T>({
 
   tearDown(parent);
 
+  document.addEventListener("dragover", (e) => {
+    e.preventDefault();
+  });
+
   const parentData: ParentData<T> = {
     getValues,
     setValues,
@@ -545,9 +549,6 @@ function setup<T>(parent: HTMLElement, parentData: ParentData<T>): void {
 
       parent.nestedParent = e.detail.parent;
     },
-    dragStarted: () => {
-      console.log("YAYAYAYAY");
-    },
   });
 }
 
@@ -934,10 +935,17 @@ export function dragstart<T>(data: NodeDragEventData<T>) {
     return;
   }
 
-  const config = data.targetData.parent.data.config;
+  const scrollParent = getScrollables();
 
+  console.log(scrollParent);
   const dragState = initDrag(data);
 
+  //dragState.scrollParentAbortController = addEvents(scrollParent, {
+  //  scroll: preventSortOnScroll(),
+  //});
+
+  const config = data.targetData.parent.data.config;
+
   const originalZIndex = data.targetData.node.el.style.zIndex;
 
   dragState.originalZIndex = originalZIndex;
@@ -976,6 +984,8 @@ export function handlePointeroverNode<T>(e: PointeroverNodeEvent<T>) {
 export function handleEnd<T>(eventData: NodeEventData<T>) {
   if (!state) return;
 
+  eventData.e.preventDefault();
+
   end(eventData, state);
 
   resetState();

diff --git a/src/utils.ts b/src/utils.ts
@@ -165,7 +165,8 @@ function isScrollable(element) {
  * @internal
  */
 export function getScrollables<T>(
-  data: ParentData<T>
+  data: ParentData<T>,
+  withRoot = false
 ): [HTMLElement, AbortController] {
   // Get all potentially scrollable elements
   const scrollableElements = document.querySelectorAll("*");
@@ -177,11 +178,11 @@ export function getScrollables<T>(
       return isScrollable(element);
     });
 
-  nonChildScrollableElements.push(data.config.root);
+  //nonChildScrollableElements.push(data.config.root);
 
   console.log(nonChildScrollableElements);
 
-  return [];
+  return nonChildScrollableElements as [HTMLElement, AbortController];
 }
 /**
  * Used for setting a single event listener on x number of events for a given

diff --git a/tests/pages/scroll/native-drag/vertical.vue b/tests/pages/scroll/native-drag/vertical.vue
@@ -24,7 +24,9 @@ const fruits = [
   "Avocado",
 ];
 
-const [parent, values] = useDragAndDrop(fruits);
+const [parent, values] = useDragAndDrop(fruits, {
+  group: "fruits",
+});
 
 const vegetables = [
   "Carrot",
@@ -49,7 +51,9 @@ const vegetables = [
   "Bell Pepper",
 ];
 
-const [parent2, values2] = useDragAndDrop(vegetables);
+const [parent2, values2] = useDragAndDrop(vegetables, {
+  group: "fruits",
+});
 </script>
 
 <template>