Added status to draggable instances

clauderic · Jun 22, 2024 · 2ccc27c · 2ccc27c
1 parent 794cf2f
commit 2ccc27c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 7 deletions.
diff --git a/.changeset/draggable-status.md b/.changeset/draggable-status.md
@@ -0,0 +1,7 @@
+---
+'@dnd-kit/abstract': patch
+'@dnd-kit/dom': patch
+'@dnd-kit/react': patch
+---
+
+Added `status` property to draggable instances to know the current status of a draggable instance. Useful to know if an instance is being dropped.
diff --git a/packages/abstract/src/core/entities/draggable/draggable.ts b/packages/abstract/src/core/entities/draggable/draggable.ts
@@ -14,6 +14,8 @@ export interface Input<T extends Data = Data> extends EntityInput<T> {
   sensors?: Sensors;
 }
 
+export type DraggableStatus = 'idle' | 'dragging' | 'dropping';
+
 export class Draggable<T extends Data = Data> extends Entity<T> {
   constructor(
     {modifiers, type, sensors, ...input}: Input<T>,
@@ -50,6 +52,9 @@ export class Draggable<T extends Data = Data> extends Entity<T> {
   @reactive
   public accessor type: Type | undefined;
 
+  @reactive
+  public accessor status: DraggableStatus = 'idle';
+
   /**
    * A boolean indicating whether the draggable item is the source of a drag operation.
    */

diff --git a/packages/dom/src/core/plugins/feedback/Feedback.ts b/packages/dom/src/core/plugins/feedback/Feedback.ts
@@ -207,6 +207,7 @@ export class Feedback extends Plugin<DragDropManager> {
 
       /* Initialize drag operation shape */
       dragOperation.shape = new DOMRectangle(element);
+      source.status = 'dragging';
 
       let elementMutationObserver: MutationObserver | undefined;
       let documentMutationObserver: MutationObserver | undefined;
@@ -365,6 +366,8 @@ export class Feedback extends Plugin<DragDropManager> {
           droppable.placeholder = undefined;
         }
 
+        source.status = 'idle';
+
         moved = false;
       };
 
@@ -373,20 +376,15 @@ export class Feedback extends Plugin<DragDropManager> {
           const onComplete = cleanup;
           cleanup = undefined;
 
+          source.status = 'dropping';
+
           const transform = currentTransform;
 
           if (!transform) {
             onComplete?.();
             return;
           }
 
-          let projectedTransform: Transform = {
-            x: 0,
-            y: 0,
-            scaleX: 1,
-            scaleY: 1,
-          };
-
           manager.renderer.rendering.then(() => {
             /* Force the source element to be promoted to the top layer before animating it */
             showPopover(element);

diff --git a/packages/react/src/core/draggable/useDraggable.ts b/packages/react/src/core/draggable/useDraggable.ts
@@ -32,6 +32,7 @@ export function useDraggable<T extends Data = Data>(
       )
   );
   const isDragSource = useComputed(() => draggable.isDragSource);
+  const status = useComputed(() => draggable.status);
 
   useOnValueChange(id, () => (draggable.id = id));
   useOnValueChange(handle, () => (draggable.handle = handle));
@@ -55,6 +56,9 @@ export function useDraggable<T extends Data = Data>(
     get isDragSource() {
       return isDragSource.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element: Element | null) => {
         draggable.handle = element ?? undefined;

diff --git a/packages/react/src/sortable/useSortable.ts b/packages/react/src/sortable/useSortable.ts
@@ -68,6 +68,7 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
 
   const isDropTarget = useComputed(() => sortable.isDropTarget);
   const isDragSource = useComputed(() => sortable.isDragSource);
+  const status = useComputed(() => sortable.status);
 
   useOnValueChange(id, () => (sortable.id = id));
   useOnValueChange(index, () => (sortable.index = index), layoutEffect);
@@ -112,6 +113,9 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     get isDropTarget() {
       return isDropTarget.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element: Element | null) => {
         sortable.handle = element ?? undefined;