@headless-tree/core 0.0.0-20260107224057 → 0.0.0-20260108162121

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # @headless-tree/core
 
-## 0.0.0-20260107224057
+## 0.0.0-20260108162121
+
+### Patch Changes
+
+- 4397d8c: Added `draggedItemOverwritesSelection` as config option to the Drag Feature. Setting it to false will disable the current default behavior, where dragging an unselected item will overwrite the selection to just the dragged item.
+
+## 1.6.2
 
 ### Patch Changes
 

package/dist/index.d.mts

@@ -68,6 +68,11 @@ type DragAndDropFeatureDef<T> = {
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
         /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
         openOnDropDelay?: number;
+        /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+        seperateDragHandle?: boolean;
+        /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+         * Defaults to true */
+        draggedItemOverwritesSelection?: boolean;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;
@@ -84,6 +89,9 @@ type DragAndDropFeatureDef<T> = {
         isDragTargetAbove: () => boolean;
         isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
+        /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+         * disable the default behavior and use this on the handler element instead. */
+        getDragHandleProps: () => Record<string, any>;
     };
     hotkeys: never;
 };
@@ -422,6 +430,7 @@ interface PropMemoizationDataRef {
     memo?: {
         tree?: Record<string, any>;
         item?: Record<string, any>;
+        drag?: Record<string, any>;
         search?: Record<string, any>;
         rename?: Record<string, any>;
     };

package/dist/index.d.ts

@@ -68,6 +68,11 @@ type DragAndDropFeatureDef<T> = {
         onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
         /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
         openOnDropDelay?: number;
+        /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+        seperateDragHandle?: boolean;
+        /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+         * Defaults to true */
+        draggedItemOverwritesSelection?: boolean;
     };
     treeInstance: {
         getDragTarget: () => DragTarget<T> | null;
@@ -84,6 +89,9 @@ type DragAndDropFeatureDef<T> = {
         isDragTargetAbove: () => boolean;
         isDragTargetBelow: () => boolean;
         isDraggingOver: () => boolean;
+        /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+         * disable the default behavior and use this on the handler element instead. */
+        getDragHandleProps: () => Record<string, any>;
     };
     hotkeys: never;
 };
@@ -422,6 +430,7 @@ interface PropMemoizationDataRef {
     memo?: {
         tree?: Record<string, any>;
         item?: Record<string, any>;
+        drag?: Record<string, any>;
         search?: Record<string, any>;
         rename?: Record<string, any>;
     };

package/dist/index.js

@@ -1527,7 +1527,8 @@ var dragAndDropFeature = {
     canDragForeignDragObjectOver: defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject ? (dataTransfer) => dataTransfer.effectAllowed !== "none" : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
-    openOnDropDelay: 800
+    openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true
   }, defaultConfig),
   stateHandlerNames: {
     dnd: "setDndState"
@@ -1620,36 +1621,8 @@ var dragAndDropFeature = {
     }
   },
   itemInstance: {
-    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
-      draggable: true,
+    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues(__spreadValues({}, prev == null ? void 0 : prev()), tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()), {
       onDragEnter: (e) => e.preventDefault(),
-      onDragStart: (e) => {
-        var _a, _b, _c, _d;
-        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-        if (!selectedItems.includes(item)) {
-          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
-        }
-        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
-          e.preventDefault();
-          return;
-        }
-        if (config.setDragImage) {
-          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? yOffset : 0);
-        }
-        if (config.createForeignDragObject && e.dataTransfer) {
-          const { format, data, dropEffect, effectAllowed } = config.createForeignDragObject(items);
-          e.dataTransfer.setData(format, data);
-          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
-          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
-        }
-        tree.applySubStateUpdate("dnd", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem()
-        });
-      },
       onDragOver: (e) => {
         var _a, _b, _c;
         e.stopPropagation();
@@ -1693,19 +1666,6 @@ var dragAndDropFeature = {
           }));
         }, 100);
       },
-      onDragEnd: (e) => {
-        var _a, _b;
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
-        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
-        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
-          return;
-        }
-        const target = getDragTarget(e, item, tree, false);
-        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
-          return;
-        }
-        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
-      },
       onDrop: (e) => __async(null, null, function* () {
         var _a, _b, _c;
         e.stopPropagation();
@@ -1734,6 +1694,51 @@ var dragAndDropFeature = {
         tree.updateDomFocus();
       })
     }),
+    getDragHandleProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
+      draggable: true,
+      onDragStart: (e) => {
+        var _a, _b, _c, _d;
+        const { draggedItemOverwritesSelection } = tree.getConfig();
+        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
+        const overwriteSelection = !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
+        const config = tree.getConfig();
+        if (overwriteSelection) {
+          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
+        }
+        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
+          e.preventDefault();
+          return;
+        }
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? yOffset : 0);
+        }
+        if (config.createForeignDragObject && e.dataTransfer) {
+          const { format, data, dropEffect, effectAllowed } = config.createForeignDragObject(items);
+          e.dataTransfer.setData(format, data);
+          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
+          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
+        }
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem()
+        });
+      },
+      onDragEnd: (e) => {
+        var _a, _b;
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
+        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
+        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
+          return;
+        }
+        const target = getDragTarget(e, item, tree, false);
+        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
+          return;
+        }
+        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
+      }
+    }),
     isDragTarget: ({ tree, item }) => {
       const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;
@@ -2308,6 +2313,14 @@ var propMemoizationFeature = {
       (_e = (_d = dataRef.current.memo).item) != null ? _e : _d.item = {};
       return memoize(props, dataRef.current.memo.item);
     },
+    getDragHandleProps: ({ item, prev }) => {
+      var _a, _b, _c, _d, _e;
+      const dataRef = item.getDataRef();
+      const props = (_a = prev == null ? void 0 : prev()) != null ? _a : {};
+      (_c = (_b = dataRef.current).memo) != null ? _c : _b.memo = {};
+      (_e = (_d = dataRef.current.memo).drag) != null ? _e : _d.drag = {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
     getRenameInputProps: ({ item, prev }) => {
       var _a, _b, _c, _d, _e;
       const dataRef = item.getDataRef();

package/dist/index.mjs

@@ -1483,7 +1483,8 @@ var dragAndDropFeature = {
     canDragForeignDragObjectOver: defaultConfig.canDropForeignDragObject !== defaultCanDropForeignDragObject ? (dataTransfer) => dataTransfer.effectAllowed !== "none" : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
-    openOnDropDelay: 800
+    openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true
   }, defaultConfig),
   stateHandlerNames: {
     dnd: "setDndState"
@@ -1576,36 +1577,8 @@ var dragAndDropFeature = {
     }
   },
   itemInstance: {
-    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
-      draggable: true,
+    getProps: ({ tree, item, prev }) => __spreadProps(__spreadValues(__spreadValues({}, prev == null ? void 0 : prev()), tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()), {
       onDragEnter: (e) => e.preventDefault(),
-      onDragStart: (e) => {
-        var _a, _b, _c, _d;
-        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-        if (!selectedItems.includes(item)) {
-          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
-        }
-        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
-          e.preventDefault();
-          return;
-        }
-        if (config.setDragImage) {
-          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? yOffset : 0);
-        }
-        if (config.createForeignDragObject && e.dataTransfer) {
-          const { format, data, dropEffect, effectAllowed } = config.createForeignDragObject(items);
-          e.dataTransfer.setData(format, data);
-          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
-          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
-        }
-        tree.applySubStateUpdate("dnd", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem()
-        });
-      },
       onDragOver: (e) => {
         var _a, _b, _c;
         e.stopPropagation();
@@ -1649,19 +1622,6 @@ var dragAndDropFeature = {
           }));
         }, 100);
       },
-      onDragEnd: (e) => {
-        var _a, _b;
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
-        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
-        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
-          return;
-        }
-        const target = getDragTarget(e, item, tree, false);
-        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
-          return;
-        }
-        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
-      },
       onDrop: (e) => __async(null, null, function* () {
         var _a, _b, _c;
         e.stopPropagation();
@@ -1690,6 +1650,51 @@ var dragAndDropFeature = {
         tree.updateDomFocus();
       })
     }),
+    getDragHandleProps: ({ tree, item, prev }) => __spreadProps(__spreadValues({}, prev == null ? void 0 : prev()), {
+      draggable: true,
+      onDragStart: (e) => {
+        var _a, _b, _c, _d;
+        const { draggedItemOverwritesSelection } = tree.getConfig();
+        const selectedItems = tree.getSelectedItems ? tree.getSelectedItems() : [tree.getFocusedItem()];
+        const overwriteSelection = !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
+        const config = tree.getConfig();
+        if (overwriteSelection) {
+          (_a = tree.setSelectedItems) == null ? void 0 : _a.call(tree, [item.getItemMeta().itemId]);
+        }
+        if (!((_c = (_b = config.canDrag) == null ? void 0 : _b.call(config, items)) != null ? _c : true)) {
+          e.preventDefault();
+          return;
+        }
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          (_d = e.dataTransfer) == null ? void 0 : _d.setDragImage(imgElement, xOffset != null ? xOffset : 0, yOffset != null ? yOffset : 0);
+        }
+        if (config.createForeignDragObject && e.dataTransfer) {
+          const { format, data, dropEffect, effectAllowed } = config.createForeignDragObject(items);
+          e.dataTransfer.setData(format, data);
+          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
+          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
+        }
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem()
+        });
+      },
+      onDragEnd: (e) => {
+        var _a, _b;
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } = tree.getConfig();
+        const draggedItems = (_a = tree.getState().dnd) == null ? void 0 : _a.draggedItems;
+        if (((_b = e.dataTransfer) == null ? void 0 : _b.dropEffect) === "none" || !draggedItems) {
+          return;
+        }
+        const target = getDragTarget(e, item, tree, false);
+        if (canDragForeignDragObjectOver && e.dataTransfer && !canDragForeignDragObjectOver(e.dataTransfer, target)) {
+          return;
+        }
+        onCompleteForeignDrop == null ? void 0 : onCompleteForeignDrop(draggedItems);
+      }
+    }),
     isDragTarget: ({ tree, item }) => {
       const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;
@@ -2264,6 +2269,14 @@ var propMemoizationFeature = {
       (_e = (_d = dataRef.current.memo).item) != null ? _e : _d.item = {};
       return memoize(props, dataRef.current.memo.item);
     },
+    getDragHandleProps: ({ item, prev }) => {
+      var _a, _b, _c, _d, _e;
+      const dataRef = item.getDataRef();
+      const props = (_a = prev == null ? void 0 : prev()) != null ? _a : {};
+      (_c = (_b = dataRef.current).memo) != null ? _c : _b.memo = {};
+      (_e = (_d = dataRef.current.memo).drag) != null ? _e : _d.drag = {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
     getRenameInputProps: ({ item, prev }) => {
       var _a, _b, _c, _d, _e;
       const dataRef = item.getDataRef();

package/package.json

@@ -13,7 +13,7 @@
     "checkbox",
     "hook"
   ],
-  "version": "0.0.0-20260107224057",
+  "version": "0.0.0-20260108162121",
   "main": "dist/index.d.ts",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",

package/src/features/drag-and-drop/drag-and-drop.spec.ts

@@ -729,6 +729,54 @@ describe("core-feature/drag-and-drop", () => {
       });
     });
 
+    describe("seperateDragHandle", () => {
+      it("includes all drag handlers in getProps() when seperateDragHandle is false", () => {
+        const props = tree.instance.getItemInstance("x111").getProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBeDefined();
+        expect(props.onDragEnd).toBeDefined();
+        expect(props.onDragEnter).toBeDefined();
+        expect(props.onDragOver).toBeDefined();
+        expect(props.onDragLeave).toBeDefined();
+        expect(props.onDrop).toBeDefined();
+      });
+
+      it("includes drag handle handlers in getDragHandleProps() when seperateDragHandle is false", () => {
+        const props = tree.instance
+          .getItemInstance("x111")
+          .getDragHandleProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBeDefined();
+        expect(props.onDragEnd).toBeDefined();
+      });
+
+      it("excludes drag handle handlers from getProps() but includes drop handlers when seperateDragHandle is true", async () => {
+        const testTree = await tree
+          .with({ seperateDragHandle: true })
+          .createTestCaseTree();
+        const props = testTree.instance.getItemInstance("x111").getProps();
+        expect(props.draggable).toBeUndefined();
+        expect(props.onDragStart).toBeUndefined();
+        expect(props.onDragEnd).toBeUndefined();
+        expect(props.onDragEnter).toBeDefined();
+        expect(props.onDragOver).toBeDefined();
+        expect(props.onDragLeave).toBeDefined();
+        expect(props.onDrop).toBeDefined();
+      });
+
+      it("includes drag handle handlers in getDragHandleProps() when seperateDragHandle is true", async () => {
+        const testTree = await tree
+          .with({ seperateDragHandle: true })
+          .createTestCaseTree();
+        const props = testTree.instance
+          .getItemInstance("x111")
+          .getDragHandleProps();
+        expect(props.draggable).toBe(true);
+        expect(props.onDragStart).toBeDefined();
+        expect(props.onDragEnd).toBeDefined();
+      });
+    });
+
     describe("retains last drag state with dragcode", () => {
       it("uses constant number of calls to canDrop", () => {
         const canDrop = tree.mockedHandler("canDrop").mockReturnValue(true);
@@ -739,5 +787,99 @@ describe("core-feature/drag-and-drop", () => {
         expect(canDrop).toBeCalledTimes(3);
       });
     });
+
+    describe("draggedItemOverwritesSelection", () => {
+      it("overwrites selection when dragging unselected item with draggedItemOverwritesSelection=true", () => {
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x113").isSelected()).toBe(true);
+        expect(tree.instance.getItemInstance("x114").isSelected()).toBe(false);
+
+        tree.do.startDrag("x114");
+
+        expect(tree.instance.getItemInstance("x111").isSelected()).toBe(false);
+        expect(tree.instance.getItemInstance("x112").isSelected()).toBe(false);
+        expect(tree.instance.getItemInstance("x113").isSelected()).toBe(false);
+        expect(tree.instance.getItemInstance("x114").isSelected()).toBe(true);
+      });
+
+      it("preserves selection when dragging unselected item with draggedItemOverwritesSelection=false", async () => {
+        const testTree = await tree
+          .with({ draggedItemOverwritesSelection: false })
+          .createTestCaseTree();
+
+        testTree.do.selectItem("x111");
+        testTree.do.ctrlSelectItem("x112");
+        testTree.do.ctrlSelectItem("x113");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+        expect(testTree.item("x114").isSelected()).toBe(false);
+        testTree.do.startDrag("x114");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+        expect(testTree.item("x114").isSelected()).toBe(false);
+      });
+
+      it("does not overwrite selection when dragging selected item with draggedItemOverwritesSelection=true", () => {
+        tree.do.selectItem("x111");
+        tree.do.ctrlSelectItem("x112");
+        tree.do.ctrlSelectItem("x113");
+
+        expect(tree.item("x111").isSelected()).toBe(true);
+        expect(tree.item("x112").isSelected()).toBe(true);
+        expect(tree.item("x113").isSelected()).toBe(true);
+
+        tree.do.startDrag("x111");
+
+        expect(tree.item("x111").isSelected()).toBe(true);
+        expect(tree.item("x112").isSelected()).toBe(true);
+        expect(tree.item("x113").isSelected()).toBe(true);
+      });
+
+      it("does not overwrite selection when dragging selected item with draggedItemOverwritesSelection=false", async () => {
+        const testTree = await tree
+          .with({ draggedItemOverwritesSelection: false })
+          .createTestCaseTree();
+
+        testTree.do.selectItem("x111");
+        testTree.do.ctrlSelectItem("x112");
+        testTree.do.ctrlSelectItem("x113");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+
+        testTree.do.startDrag("x111");
+
+        expect(testTree.item("x111").isSelected()).toBe(true);
+        expect(testTree.item("x112").isSelected()).toBe(true);
+        expect(testTree.item("x113").isSelected()).toBe(true);
+      });
+
+      it("drags all selected items when draggedItemOverwritesSelection=false", async () => {
+        const testTree = await tree
+          .with({ draggedItemOverwritesSelection: false })
+          .createTestCaseTree();
+
+        testTree.do.selectItem("x111");
+        testTree.do.ctrlSelectItem("x112");
+        testTree.do.ctrlSelectItem("x113");
+
+        testTree.do.startDrag("x111");
+        testTree.do.dragOverAndDrop("x21");
+
+        testTree.expect.dropped(["x111", "x112", "x113"], {
+          item: testTree.item("x21"),
+        });
+      });
+    });
   });
 });

package/src/features/drag-and-drop/feature.ts

@@ -57,6 +57,7 @@ export const dragAndDropFeature: FeatureImplementation = {
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
     openOnDropDelay: 800,
+    draggedItemOverwritesSelection: true,
     ...defaultConfig,
   }),
 
@@ -178,47 +179,10 @@ export const dragAndDropFeature: FeatureImplementation = {
   itemInstance: {
     getProps: ({ tree, item, prev }) => ({
       ...prev?.(),
-
-      draggable: true,
+      ...(tree.getConfig().seperateDragHandle ? {} : item.getDragHandleProps()),
 
       onDragEnter: (e: DragEvent) => e.preventDefault(),
 
-      onDragStart: (e: DragEvent) => {
-        const selectedItems = tree.getSelectedItems
-          ? tree.getSelectedItems()
-          : [tree.getFocusedItem()];
-        const items = selectedItems.includes(item) ? selectedItems : [item];
-        const config = tree.getConfig();
-
-        if (!selectedItems.includes(item)) {
-          tree.setSelectedItems?.([item.getItemMeta().itemId]);
-        }
-
-        if (!(config.canDrag?.(items) ?? true)) {
-          e.preventDefault();
-          return;
-        }
-
-        if (config.setDragImage) {
-          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
-          e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
-        }
-
-        if (config.createForeignDragObject && e.dataTransfer) {
-          const { format, data, dropEffect, effectAllowed } =
-            config.createForeignDragObject(items);
-          e.dataTransfer.setData(format, data);
-
-          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
-          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
-        }
-
-        tree.applySubStateUpdate("dnd", {
-          draggedItems: items,
-          draggingOverItem: tree.getFocusedItem(),
-        });
-      },
-
       onDragOver: (e: DragEvent) => {
         e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
@@ -277,27 +241,6 @@ export const dragAndDropFeature: FeatureImplementation = {
         }, 100);
       },
 
-      onDragEnd: (e: DragEvent) => {
-        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
-          tree.getConfig();
-        const draggedItems = tree.getState().dnd?.draggedItems;
-
-        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
-          return;
-        }
-
-        const target = getDragTarget(e, item, tree, false);
-        if (
-          canDragForeignDragObjectOver &&
-          e.dataTransfer &&
-          !canDragForeignDragObjectOver(e.dataTransfer, target)
-        ) {
-          return;
-        }
-
-        onCompleteForeignDrop?.(draggedItems);
-      },
-
       onDrop: async (e: DragEvent) => {
         e.stopPropagation();
         const dataRef = tree.getDataRef<DndDataRef>();
@@ -332,6 +275,72 @@ export const dragAndDropFeature: FeatureImplementation = {
       },
     }),
 
+    getDragHandleProps: ({ tree, item, prev }) => ({
+      ...prev?.(),
+
+      draggable: true,
+
+      onDragStart: (e: DragEvent) => {
+        const { draggedItemOverwritesSelection } = tree.getConfig();
+        const selectedItems = tree.getSelectedItems
+          ? tree.getSelectedItems()
+          : [tree.getFocusedItem()];
+        const overwriteSelection =
+          !selectedItems.includes(item) && draggedItemOverwritesSelection;
+        const items = overwriteSelection ? [item] : selectedItems;
+        const config = tree.getConfig();
+
+        if (overwriteSelection) {
+          tree.setSelectedItems?.([item.getItemMeta().itemId]);
+        }
+
+        if (!(config.canDrag?.(items) ?? true)) {
+          e.preventDefault();
+          return;
+        }
+
+        if (config.setDragImage) {
+          const { imgElement, xOffset, yOffset } = config.setDragImage(items);
+          e.dataTransfer?.setDragImage(imgElement, xOffset ?? 0, yOffset ?? 0);
+        }
+
+        if (config.createForeignDragObject && e.dataTransfer) {
+          const { format, data, dropEffect, effectAllowed } =
+            config.createForeignDragObject(items);
+          e.dataTransfer.setData(format, data);
+
+          if (dropEffect) e.dataTransfer.dropEffect = dropEffect;
+          if (effectAllowed) e.dataTransfer.effectAllowed = effectAllowed;
+        }
+
+        tree.applySubStateUpdate("dnd", {
+          draggedItems: items,
+          draggingOverItem: tree.getFocusedItem(),
+        });
+      },
+
+      onDragEnd: (e: DragEvent) => {
+        const { onCompleteForeignDrop, canDragForeignDragObjectOver } =
+          tree.getConfig();
+        const draggedItems = tree.getState().dnd?.draggedItems;
+
+        if (e.dataTransfer?.dropEffect === "none" || !draggedItems) {
+          return;
+        }
+
+        const target = getDragTarget(e, item, tree, false);
+        if (
+          canDragForeignDragObjectOver &&
+          e.dataTransfer &&
+          !canDragForeignDragObjectOver(e.dataTransfer, target)
+        ) {
+          return;
+        }
+
+        onCompleteForeignDrop?.(draggedItems);
+      },
+    }),
+
     isDragTarget: ({ tree, item }) => {
       const target = tree.getDragTarget();
       return target ? target.item.getId() === item.getId() : false;

package/src/features/drag-and-drop/types.ts

@@ -97,6 +97,13 @@ export type DragAndDropFeatureDef<T> = {
 
     /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
     openOnDropDelay?: number;
+
+    /** If true, `item.getProps()` will not include drag event handlers. Use `item.getDragHandleProps()` on the handler element. */
+    seperateDragHandle?: boolean;
+
+    /** If true, the item that is dragged is not selected, the selected items will be overwritten to just the dragged item.
+     * Defaults to true */
+    draggedItemOverwritesSelection?: boolean;
   };
   treeInstance: {
     getDragTarget: () => DragTarget<T> | null;
@@ -118,6 +125,10 @@ export type DragAndDropFeatureDef<T> = {
     isDragTargetAbove: () => boolean;
     isDragTargetBelow: () => boolean;
     isDraggingOver: () => boolean;
+
+    /** Note that `item.getProps()` already passes in all drag event handlers by default. Set `seperateDragHandle` to true to
+     * disable the default behavior and use this on the handler element instead. */
+    getDragHandleProps: () => Record<string, any>;
   };
   hotkeys: never;
 };

package/src/features/prop-memoization/feature.ts

@@ -59,6 +59,14 @@ export const propMemoizationFeature: FeatureImplementation = {
       return memoize(props, dataRef.current.memo.item);
     },
 
+    getDragHandleProps: ({ item, prev }) => {
+      const dataRef = item.getDataRef<PropMemoizationDataRef>();
+      const props = prev?.() ?? {};
+      dataRef.current.memo ??= {};
+      dataRef.current.memo.drag ??= {};
+      return memoize(props, dataRef.current.memo.drag);
+    },
+
     getRenameInputProps: ({ item, prev }) => {
       const dataRef = item.getDataRef<PropMemoizationDataRef>();
       const props = prev?.() ?? {};

package/src/features/prop-memoization/types.ts

@@ -2,6 +2,7 @@ export interface PropMemoizationDataRef {
   memo?: {
     tree?: Record<string, any>;
     item?: Record<string, any>;
+    drag?: Record<string, any>;
     search?: Record<string, any>;
     rename?: Record<string, any>;
   };