Introduce rootElement option on Feedback plugin

clauderic · Sep 18, 2024 · c597b3f · c597b3f
1 parent fc232a7
commit c597b3f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/.changeset/feedback-root.md b/.changeset/feedback-root.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/dom': patch
+---
+
+Introduce `rootElement` option on `Feedback` plugin.
diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts
@@ -28,8 +28,12 @@ const IDENTIFIER_ATTRIBUTE = `${ATTR_PREFIX}id`;
 const IGNORED_ATTRIBUTES = [ATTRIBUTE, PLACEHOLDER_ATTRIBUTE, 'popover'];
 const IGNORED_STYLES = ['view-transition-name'];
 
-export class Feedback extends Plugin<DragDropManager> {
-  constructor(manager: DragDropManager) {
+export interface FeedbackOptions {
+  rootElement?: Element | ((source: Draggable) => Element);
+}
+
+export class Feedback extends Plugin<DragDropManager, FeedbackOptions> {
+  constructor(manager: DragDropManager, options?: FeedbackOptions) {
     super(manager);
 
     let style: HTMLStyleElement | undefined;
@@ -141,6 +145,15 @@ export class Feedback extends Plugin<DragDropManager> {
 
       if (placeholder) {
         element.insertAdjacentElement('afterend', placeholder);
+
+        if (options?.rootElement) {
+          const root =
+            typeof options.rootElement === 'function'
+              ? options.rootElement(source)
+              : options.rootElement;
+
+          root.appendChild(element);
+        }
       }
 
       if (supportsPopover(element)) {
@@ -470,11 +483,11 @@ export class Feedback extends Plugin<DragDropManager> {
 }
 
 function createPlaceholder(source: Draggable) {
-  const {element, manager} = source;
+  return untracked(() => {
+    const {element, manager} = source;
 
-  if (!element || !manager) return;
+    if (!element || !manager) return;
 
-  return untracked(() => {
     const {droppables} = manager.registry;
     const containedDroppables = [];