Bug fixes

clauderic · Jun 3, 2024 · d349edf · d349edf
1 parent aa2a151
commit d349edf
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 33 deletions.
diff --git a/apps/stories/stories/react/Sortable/docs/examples/QuickStart.jsx b/apps/stories/stories/react/Sortable/docs/examples/QuickStart.jsx
@@ -10,7 +10,7 @@ export function Example({style = styles}) {
 
   return (
     <DragDropProvider
-      onDragOver={(event) => {
+      onDragEnd={(event) => {
         const {source, target} = event.operation;
 
         if (source && target) {

diff --git a/packages/dom/src/core/entities/draggable/draggable.ts b/packages/dom/src/core/entities/draggable/draggable.ts
@@ -36,15 +36,15 @@ export class Draggable<T extends Data = Data> extends AbstractDraggable<T> {
   public sensors: Sensors | undefined;
 
   constructor(
-    input: Input<T>,
+    {element, handle, feedback = 'default', sensors, ...input}: Input<T>,
     public manager: AbstractDragDropManager<any, any>
   ) {
-    const {feedback = 'default'} = input;
-    const config = {...input, feedback};
-
-    super(config, manager);
+    super(input, manager);
 
+    this.element = element;
+    this.handle = handle;
     this.feedback = feedback;
+    this.sensors = sensors;
 
     const cleanupEffect = effect(() => {
       const sensors = this.sensors?.map(descriptor) ?? [...manager.sensors];

diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts
@@ -302,6 +302,11 @@ export class Feedback extends Plugin<DragDropManager> {
         resizeObserver.disconnect();
 
         styles.reset();
+
+        if (element.isConnected) {
+          placeholder.replaceWith(element);
+        }
+
         placeholder.remove();
         element.removeAttribute(ATTRIBUTE);
 

diff --git a/packages/dom/src/sortable/sortable.ts b/packages/dom/src/sortable/sortable.ts
@@ -94,15 +94,6 @@ export class Sortable<T extends Data = Data> {
   @reactive
   group: UniqueIdentifier | undefined;
 
-  @reactive
-  element: Element | undefined;
-
-  @reactive
-  source: Element | undefined;
-
-  @reactive
-  target: Element | undefined;
-
   transition: SortableTransition | null;
 
   constructor(
@@ -167,24 +158,6 @@ export class Sortable<T extends Data = Data> {
           this.droppable.disabled = !target;
         }
       },
-      () => {
-        const {element} = this;
-
-        this.droppable.element = element;
-        this.draggable.element = element;
-      },
-      () => {
-        const {target} = this;
-        const element = untracked(() => this.element);
-
-        this.droppable.element = !target && element ? element : target;
-      },
-      () => {
-        const {source} = this;
-        const element = untracked(() => this.element);
-
-        this.draggable.element = !source && element ? element : source;
-      },
       ...(inputEffects?.(this) ?? [])
     );
 
@@ -243,6 +216,31 @@ export class Sortable<T extends Data = Data> {
     });
   }
 
+  public set element(element: Element | undefined) {
+    this.draggable.element = element;
+    this.droppable.element = element;
+  }
+
+  public get element() {
+    return this.droppable.element ?? this.draggable.element;
+  }
+
+  public set target(target: Element | undefined) {
+    this.droppable.element = target;
+  }
+
+  public get target() {
+    return this.droppable.element;
+  }
+
+  public set source(source: Element | undefined) {
+    this.draggable.element = source;
+  }
+
+  public get source() {
+    return this.draggable.element;
+  }
+
   public get disabled() {
     return this.draggable.disabled && this.droppable.disabled;
   }