internal: fixes issue where touch action was not reset on handleEnd

dist/index.cjs

@@ -25,6 +25,7 @@ __export(src_exports, {
   addNodeClass: () => addNodeClass,
   addParentClass: () => addParentClass,
   animations: () => animations,
+  copyNodeStyle: () => copyNodeStyle,
   dragAndDrop: () => dragAndDrop,
   dragStateProps: () => dragStateProps,
   dragValues: () => dragValues,
@@ -1226,6 +1227,34 @@ function handleRootKeydown(e) {
 }
 function handleRootDrop(_e) {
 }
+function copyNodeStyle(sourceNode, targetNode, omitKeys = false) {
+  const computedStyle = window.getComputedStyle(sourceNode);
+  const omittedKeys = [
+    "position",
+    "z-index",
+    "top",
+    "left",
+    "x",
+    "pointer-events",
+    "y",
+    "transform-origin",
+    "filter",
+    "-webkit-text-fill-color"
+  ];
+  for (const key of Array.from(computedStyle)) {
+    if (omitKeys === false && key && omittedKeys.includes(key)) continue;
+    targetNode.style.setProperty(
+      key,
+      computedStyle.getPropertyValue(key),
+      computedStyle.getPropertyPriority(key)
+    );
+  }
+  for (const child of Array.from(sourceNode.children)) {
+    if (!isNode(child)) continue;
+    const targetChild = targetNode.children[Array.from(sourceNode.children).indexOf(child)];
+    copyNodeStyle(child, targetChild, omitKeys);
+  }
+}
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
   pd(e);
@@ -2887,6 +2916,7 @@ function addEvents(el, events) {
   addNodeClass,
   addParentClass,
   animations,
+  copyNodeStyle,
   dragAndDrop,
   dragStateProps,
   dragValues,

dist/index.d.cts

@@ -958,6 +958,7 @@ declare function resetState(): void;
  * @returns void
  */
 declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
+declare function copyNodeStyle(sourceNode: HTMLElement, targetNode: HTMLElement, omitKeys?: boolean): void;
 /**
  * Initializes the drag and drop functionality for a given parent.
  *
@@ -1374,4 +1375,4 @@ declare function isNode(el: unknown): el is Node;
  */
 declare function addEvents(el: Document | ShadowRoot | Node | HTMLElement | Window, events: EventHandlers | any): AbortController;
 
-export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
+export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };

dist/index.d.ts

@@ -958,6 +958,7 @@ declare function resetState(): void;
  * @returns void
  */
 declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
+declare function copyNodeStyle(sourceNode: HTMLElement, targetNode: HTMLElement, omitKeys?: boolean): void;
 /**
  * Initializes the drag and drop functionality for a given parent.
  *
@@ -1374,4 +1375,4 @@ declare function isNode(el: unknown): el is Node;
  */
 declare function addEvents(el: Document | ShadowRoot | Node | HTMLElement | Window, events: EventHandlers | any): AbortController;
 
-export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
+export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type DynamicValuesData, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, getElFromPoint, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointerover, handleNodePointerup, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, nodeEventData, nodes, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, transfer, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };

dist/index.mjs

@@ -1137,6 +1137,34 @@ function handleRootKeydown(e) {
 }
 function handleRootDrop(_e) {
 }
+function copyNodeStyle(sourceNode, targetNode, omitKeys = false) {
+  const computedStyle = window.getComputedStyle(sourceNode);
+  const omittedKeys = [
+    "position",
+    "z-index",
+    "top",
+    "left",
+    "x",
+    "pointer-events",
+    "y",
+    "transform-origin",
+    "filter",
+    "-webkit-text-fill-color"
+  ];
+  for (const key of Array.from(computedStyle)) {
+    if (omitKeys === false && key && omittedKeys.includes(key)) continue;
+    targetNode.style.setProperty(
+      key,
+      computedStyle.getPropertyValue(key),
+      computedStyle.getPropertyPriority(key)
+    );
+  }
+  for (const child of Array.from(sourceNode.children)) {
+    if (!isNode(child)) continue;
+    const targetChild = targetNode.children[Array.from(sourceNode.children).indexOf(child)];
+    copyNodeStyle(child, targetChild, omitKeys);
+  }
+}
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
   pd(e);
@@ -2797,6 +2825,7 @@ export {
   addNodeClass,
   addParentClass,
   animations,
+  copyNodeStyle,
   dragAndDrop,
   dragStateProps,
   dragValues,

src/index.ts

@@ -241,6 +241,47 @@ function handleRootKeydown(e: KeyboardEvent) {
 
 function handleRootDrop(_e: DragEvent) {}
 
+export function copyNodeStyle(
+  sourceNode: HTMLElement,
+  targetNode: HTMLElement,
+  omitKeys = false
+) {
+  const computedStyle = window.getComputedStyle(sourceNode);
+
+  const omittedKeys = [
+    "position",
+    "z-index",
+    "top",
+    "left",
+    "x",
+    "pointer-events",
+    "y",
+    "transform-origin",
+    "filter",
+    "-webkit-text-fill-color",
+  ];
+
+  for (const key of Array.from(computedStyle)) {
+    if (omitKeys === false && key && omittedKeys.includes(key)) continue;
+
+    targetNode.style.setProperty(
+      key,
+      computedStyle.getPropertyValue(key),
+      computedStyle.getPropertyPriority(key)
+    );
+  }
+
+  for (const child of Array.from(sourceNode.children)) {
+    if (!isNode(child)) continue;
+
+    const targetChild = targetNode.children[
+      Array.from(sourceNode.children).indexOf(child)
+    ] as Node;
+
+    copyNodeStyle(child, targetChild, omitKeys);
+  }
+}
+
 /**
  * If we are currently dragging, then let's prevent default on dragover to avoid
  * the default behavior of the browser on drop.
@@ -2003,6 +2044,13 @@ export function handleEnd<T>(state: DragState<T> | SynthDragState<T>) {
 
   document.body.style.userSelect = state.rootUserSelect || "";
 
+  if (isSynthDragState(state)) {
+    document.documentElement.style.overscrollBehavior =
+      state.rootOverScrollBehavior || "";
+
+    document.documentElement.style.touchAction = state.rootTouchAction || "";
+  }
+
   if (isSynthDragState(state)) cancelSynthScroll(state);
 
   if ("longPressTimeout" in state && state.longPressTimeout)
@@ -2110,9 +2158,6 @@ function initSynthDrag<T>(
   _state: BaseDragState<T>,
   draggedNodes: Array<NodeRecord<T>>
 ): SynthDragState<T> {
-  document.documentElement.style.overscrollBehavior = "none";
-  document.documentElement.style.touchAction = "none";
-
   const config = parent.data.config;
 
   let dragImage: HTMLElement | undefined;
@@ -2201,8 +2246,14 @@ function initSynthDrag<T>(
     synthDragging: true,
     rootScrollWidth: document.scrollingElement?.scrollWidth,
     rootScrollHeight: document.scrollingElement?.scrollHeight,
+    rootOverScrollBehavior: document.documentElement.style.overscrollBehavior,
+    rootTouchAction: document.documentElement.style.touchAction,
   };
 
+  document.documentElement.style.overscrollBehavior = "none";
+
+  document.documentElement.style.touchAction = "none";
+
   const synthDragState = setDragState({
     ...dragStateProps(
       node,

src/types.ts

@@ -768,6 +768,8 @@ export interface SynthDragStateProps {
   lastScrollY: HTMLElement | null;
   rootScrollWidth: number | undefined;
   rootScrollHeight: number | undefined;
+  rootOverScrollBehavior: string | undefined;
+  rootTouchAction: string | undefined;
 }
 
 export type DragState<T> = DragStateProps<T> & BaseDragState<T>;

tests/.nuxt/nuxt.d.ts

@@ -1,7 +1,7 @@
 // Generated by nuxi
-/// <reference types="@nuxtjs/tailwindcss" />
-/// <reference types="@nuxt/devtools" />
 /// <reference types="@nuxt/telemetry" />
+/// <reference types="@nuxt/devtools" />
+/// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />
 /// <reference path="types/plugins.d.ts" />