deepsea-components 5.16.1 → 5.16.3

package/dist/components/DraggableGrid.cjs

@@ -63,6 +63,7 @@ function getOrderMap({ prev, orders, keys }) {
             orderSet.delete(prevOrder);
             return false;
         }
+        return true;
     });
     orders = Array.from(orderSet);
     newKeys.forEach((key, index)=>orderMap.set(key, orders[index]));
@@ -82,10 +83,10 @@ function getOrderToKey(keyToOrder) {
             key
         ]));
 }
-const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest })=>{
+function DraggableGridItem({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) {
     const element = (0, external_react_namespaceObject.useRef)(null);
     (0, external_soda_hooks_namespaceObject.useDragMove)({
-        element,
+        element: (0, external_deepsea_tools_namespaceObject.isNullable)(handle) ? element : ()=>element.current && ("string" == typeof handle ? element.current.querySelector(handle) : "function" == typeof handle ? handle(item, itemKey, element.current) : handle),
         onDragMoveStart,
         onDragMove,
         onDragMoveEnd
@@ -94,20 +95,15 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
         ref: element,
         ...rest
     });
-};
-function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
-    const [itemToKey, keyToItem] = (0, external_react_namespaceObject.useMemo)(()=>{
-        const itemToKey = new Map();
+}
+function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }) {
+    const keyToItem = (0, external_react_namespaceObject.useMemo)(()=>{
         const keyToItem = new Map();
-        items.forEach((item, index)=>{
+        items.forEach((item)=>{
             const key = keyExtractor ? keyExtractor(item) : item;
-            itemToKey.set(item, key);
             keyToItem.set(key, item);
         });
-        return [
-            itemToKey,
-            keyToItem
-        ];
+        return keyToItem;
     }, [
         items,
         keyExtractor
@@ -140,11 +136,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         keys: Array.from(keyToItem.keys())
     });
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
+        if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
             cache.orders = orders;
-            cache.keys = Array.from(keyToItem.keys());
+            cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys());
             const newOrderMap = getOrderMap({
-                prev: keyToOrder,
+                prev: dragging?.keyToOrder ?? keyToOrder,
                 orders,
                 keys: cache.keys
             });
@@ -155,6 +151,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         }
     }, [
         dragging,
+        cache,
         orders,
         keyToItem,
         keyToOrder,
@@ -171,7 +168,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
             }
         }
     }, [
+        dragging,
         orders,
+        columns,
+        rows,
+        gapX,
+        gapY,
+        itemWidth,
+        itemHeight,
         keyToItem,
         keyToOrder,
         onOrderMapChange
@@ -186,6 +190,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         onOrderMapChange
     ]);
     function onDragMoveStart(key, event) {
+        _onDragMoveStart?.(event);
         const position = getPosition({
             order: keyToOrder.get(key),
             columns,
@@ -199,8 +204,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
             key,
             startX: position.x,
             startY: position.y,
-            deltaX: 0,
-            deltaY: 0,
+            deltaX: event.deltaX,
+            deltaY: event.deltaY,
             orders,
             columns,
             rows,
@@ -212,6 +217,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         });
     }
     function onDragMove(event) {
+        _onDragMove?.(event);
         if (!dragging) return;
         const { deltaX, deltaY } = event;
         const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
@@ -277,10 +283,16 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         setKeyToOrder(newKeyToOrder);
         onOrderMapChange?.(newKeyToOrder);
     }
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event) {
+        _onDragMoveEnd?.(event);
         if (!dragging) return;
         setDragging(void 0);
     }
+    function isItemDisabled(key) {
+        if (!_isItemDisabled) return false;
+        if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key);
+        return _isItemDisabled(keyToItem.get(key), key);
+    }
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGrid, "function" == typeof className ? className({
             isDragging: !!dragging
@@ -327,14 +339,17 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
                 isDragging: isDragging
             }) : item;
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(DraggableGridItem, {
+                item: item,
+                itemKey: key,
+                handle: handle,
                 className: (0, external_deepsea_tools_namespaceObject.clsx)(external_DraggableGrid_module_cjs_default().draggableGridItem, "function" == typeof classNames?.item ? classNames.item({
                     order,
                     isDragging: isDragging
                 }) : classNames?.item),
                 style: style,
-                onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
-                onDragMove: disabled ? void 0 : onDragMove,
-                onDragMoveEnd: disabled ? void 0 : onDragMoveEnd,
+                onDragMoveStart: disabled || isItemDisabled(key) ? void 0 : (event)=>onDragMoveStart(key, event),
+                onDragMove: disabled || isItemDisabled(key) ? void 0 : onDragMove,
+                onDragMoveEnd: disabled || isItemDisabled(key) ? void 0 : onDragMoveEnd,
                 children: children
             }, key);
         })

package/dist/components/DraggableGrid.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, ComponentProps, Key, ReactNode } from "react";
+import { DragMoveEvents } from "soda-hooks";
 export type DraggableGridClassName = string | ((status: ContainerStatus) => string);
 export type DraggableGridItemClassName = string | ((status: DraggableGridItemStatus) => string);
 export type DraggableGridStyle = CSSProperties | ((status: ContainerStatus) => CSSProperties);
@@ -22,7 +23,7 @@ export interface DraggableGridItemStatus {
 export type DraggableGridKeyToOrder = Map<Key, number>;
 /** 次序到元素的 key 的映射 */
 export type DraggableGridOrderToKey = Map<number, Key>;
-export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & {
+export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & DragMoveEvents<HTMLDivElement> & {
     /** 类名 */
     className?: DraggableGridClassName;
     /** 类名 */
@@ -61,11 +62,13 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
     /** 次序变化时回调 */
     onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void;
     /** 禁用的元素 */
-    isItemDisabled?: Key[] | ((item: T) => boolean);
+    isItemDisabled?: Key[] | ((item: T, key: Key) => boolean);
     /** 禁用的次序 */
     isOrderDisabled?: number[] | ((order: number) => boolean);
     /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
     orderPriority?: (a: number, b: number) => number;
+    /** 触发移动的元素 */
+    handle?: string | HTMLElement | ((item: T, key: Key, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null;
 } & (T extends ReactNode ? {
     /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
     render?: (item: T, status: DraggableGridItemStatus) => ReactNode;
@@ -79,4 +82,4 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
     /** 获取 key 的函数，当 T 为 Key 时，keyExtractor 为可选 */
     keyExtractor: (item: T) => Key;
 });
-export declare function DraggableGrid<T>({ className, classNames, style, items, disabled, columns, rows, gap, gapX, gapY, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }: DraggableGridProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DraggableGrid<T>({ className, classNames, style, items, disabled, columns, rows, gap, gapX, gapY, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }: DraggableGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DraggableGrid.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { clsx, getArray } from "deepsea-tools";
+import { clsx, getArray, isNullable } from "deepsea-tools";
 import { useDragMove } from "soda-hooks";
 import DraggableGrid_module from "./DraggableGrid.module.js";
 function isTheSameArray(a, b) {
@@ -25,6 +25,7 @@ function getOrderMap({ prev, orders, keys }) {
             orderSet.delete(prevOrder);
             return false;
         }
+        return true;
     });
     orders = Array.from(orderSet);
     newKeys.forEach((key, index)=>orderMap.set(key, orders[index]));
@@ -44,10 +45,10 @@ function getOrderToKey(keyToOrder) {
             key
         ]));
 }
-const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest })=>{
+function DraggableGridItem({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) {
     const element = useRef(null);
     useDragMove({
-        element,
+        element: isNullable(handle) ? element : ()=>element.current && ("string" == typeof handle ? element.current.querySelector(handle) : "function" == typeof handle ? handle(item, itemKey, element.current) : handle),
         onDragMoveStart,
         onDragMove,
         onDragMoveEnd
@@ -56,20 +57,15 @@ const DraggableGridItem = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest
         ref: element,
         ...rest
     });
-};
-function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled, isOrderDisabled, orderPriority, ...rest }) {
-    const [itemToKey, keyToItem] = useMemo(()=>{
-        const itemToKey = new Map();
+}
+function DraggableGrid({ className, classNames, style, items = [], disabled, columns, rows, gap = 0, gapX = gap, gapY = gap, itemWidth, itemHeight, orderMap, onOrderMapChange, render, keyExtractor, isItemDisabled: _isItemDisabled, isOrderDisabled, orderPriority, handle, onDragMoveStart: _onDragMoveStart, onDragMove: _onDragMove, onDragMoveEnd: _onDragMoveEnd, ...rest }) {
+    const keyToItem = useMemo(()=>{
         const keyToItem = new Map();
-        items.forEach((item, index)=>{
+        items.forEach((item)=>{
             const key = keyExtractor ? keyExtractor(item) : item;
-            itemToKey.set(item, key);
             keyToItem.set(key, item);
         });
-        return [
-            itemToKey,
-            keyToItem
-        ];
+        return keyToItem;
     }, [
         items,
         keyExtractor
@@ -102,11 +98,11 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         keys: Array.from(keyToItem.keys())
     });
     useEffect(()=>{
-        if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
+        if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
             cache.orders = orders;
-            cache.keys = Array.from(keyToItem.keys());
+            cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys());
             const newOrderMap = getOrderMap({
-                prev: keyToOrder,
+                prev: dragging?.keyToOrder ?? keyToOrder,
                 orders,
                 keys: cache.keys
             });
@@ -117,6 +113,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         }
     }, [
         dragging,
+        cache,
         orders,
         keyToItem,
         keyToOrder,
@@ -133,7 +130,14 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
             }
         }
     }, [
+        dragging,
         orders,
+        columns,
+        rows,
+        gapX,
+        gapY,
+        itemWidth,
+        itemHeight,
         keyToItem,
         keyToOrder,
         onOrderMapChange
@@ -148,6 +152,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         onOrderMapChange
     ]);
     function onDragMoveStart(key, event) {
+        _onDragMoveStart?.(event);
         const position = getPosition({
             order: keyToOrder.get(key),
             columns,
@@ -161,8 +166,8 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
             key,
             startX: position.x,
             startY: position.y,
-            deltaX: 0,
-            deltaY: 0,
+            deltaX: event.deltaX,
+            deltaY: event.deltaY,
             orders,
             columns,
             rows,
@@ -174,6 +179,7 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         });
     }
     function onDragMove(event) {
+        _onDragMove?.(event);
         if (!dragging) return;
         const { deltaX, deltaY } = event;
         const { key, orders, keyToOrder, startX, startY, columns, gapX, gapY, itemWidth, itemHeight } = dragging;
@@ -239,10 +245,16 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
         setKeyToOrder(newKeyToOrder);
         onOrderMapChange?.(newKeyToOrder);
     }
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event) {
+        _onDragMoveEnd?.(event);
         if (!dragging) return;
         setDragging(void 0);
     }
+    function isItemDisabled(key) {
+        if (!_isItemDisabled) return false;
+        if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key);
+        return _isItemDisabled(keyToItem.get(key), key);
+    }
     return /*#__PURE__*/ jsx("div", {
         className: clsx(DraggableGrid_module.draggableGrid, "function" == typeof className ? className({
             isDragging: !!dragging
@@ -289,14 +301,17 @@ function DraggableGrid({ className, classNames, style, items = [], disabled, col
                 isDragging: isDragging
             }) : item;
             return /*#__PURE__*/ jsx(DraggableGridItem, {
+                item: item,
+                itemKey: key,
+                handle: handle,
                 className: clsx(DraggableGrid_module.draggableGridItem, "function" == typeof classNames?.item ? classNames.item({
                     order,
                     isDragging: isDragging
                 }) : classNames?.item),
                 style: style,
-                onDragMoveStart: disabled ? void 0 : (event)=>onDragMoveStart(key, event),
-                onDragMove: disabled ? void 0 : onDragMove,
-                onDragMoveEnd: disabled ? void 0 : onDragMoveEnd,
+                onDragMoveStart: disabled || isItemDisabled(key) ? void 0 : (event)=>onDragMoveStart(key, event),
+                onDragMove: disabled || isItemDisabled(key) ? void 0 : onDragMove,
+                onDragMoveEnd: disabled || isItemDisabled(key) ? void 0 : onDragMoveEnd,
                 children: children
             }, key);
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.16.1",
+  "version": "5.16.3",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -40,8 +40,8 @@
     "echarts": "^5.6.0",
     "hls.js": "^1.6.9",
     "smooth-scrollbar": "^8.8.4",
-    "soda-hooks": "6.13.3",
-    "deepsea-tools": "5.40.6"
+    "deepsea-tools": "5.41.0",
+    "soda-hooks": "6.13.4"
   },
   "devDependencies": {
     "typescript": "^5.9.2"

package/src/components/DraggableGrid.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties, ComponentProps, FC, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
-import { clsx, equal, getArray } from "deepsea-tools"
-import { DragMoveEvent, UseDragMoveParams, useDragMove } from "soda-hooks"
+import { CSSProperties, ComponentProps, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { clsx, getArray, isNullable } from "deepsea-tools"
+import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"
 
@@ -50,13 +50,13 @@ function isTheSameIterable<T>(a: Iterable<T>, b: Iterable<T>) {
     return aSet.difference(bSet).size === 0
 }
 
-interface GetOrderMapParams<T> {
+interface GetOrderMapParams {
     prev?: DraggableGridKeyToOrder
     orders: number[]
     keys: Key[]
 }
 
-function getOrderMap<T>({ prev, orders, keys }: GetOrderMapParams<T>) {
+function getOrderMap({ prev, orders, keys }: GetOrderMapParams) {
     const orderSet = new Set(orders)
     const orderMap = new Map<Key, number>()
     const newKeys = keys.filter(key => {
@@ -67,6 +67,7 @@ function getOrderMap<T>({ prev, orders, keys }: GetOrderMapParams<T>) {
             orderSet.delete(prevOrder)
             return false
         }
+        return true
     })
     orders = Array.from(orderSet)
     newKeys.forEach((key, index) => orderMap.set(key, orders[index]))
@@ -100,51 +101,54 @@ function getOrderToKey(keyToOrder: DraggableGridKeyToOrder) {
     return new Map(Array.from(keyToOrder.entries()).map(([key, order]) => [order, key]))
 }
 
-export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> & {
-    /** 类名 */
-    className?: DraggableGridClassName
-    /** 类名 */
-    classNames?: DraggableGridClassNames
-    /** 样式 */
-    style?: DraggableGridStyle
-    /** 数据源 */
-    items?: T[]
-    /** 是否禁用拖拽 */
-    disabled?: boolean
-    /** 列数 */
-    columns: number
-    /** 行数 */
-    rows: number
-    /**
-     * 间距
-     * @default 0
-     */
-    gap?: number
-    /**
-     * 水平间距
-     * @default 0
-     */
-    gapX?: number
-    /**
-     * 垂直间距
-     * @default 0
-     */
-    gapY?: number
-    /** 元素宽度 */
-    itemWidth: number
-    /** 元素高度 */
-    itemHeight: number
-    /** 元素的 key 到次序的映射 */
-    orderMap?: DraggableGridKeyToOrder
-    /** 次序变化时回调 */
-    onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void
-    /** 禁用的元素 */
-    isItemDisabled?: Key[] | ((item: T) => boolean)
-    /** 禁用的次序 */
-    isOrderDisabled?: number[] | ((order: number) => boolean)
-    /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
-    orderPriority?: (a: number, b: number) => number
-} & (T extends ReactNode
+export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "children"> &
+    DragMoveEvents<HTMLDivElement> & {
+        /** 类名 */
+        className?: DraggableGridClassName
+        /** 类名 */
+        classNames?: DraggableGridClassNames
+        /** 样式 */
+        style?: DraggableGridStyle
+        /** 数据源 */
+        items?: T[]
+        /** 是否禁用拖拽 */
+        disabled?: boolean
+        /** 列数 */
+        columns: number
+        /** 行数 */
+        rows: number
+        /**
+         * 间距
+         * @default 0
+         */
+        gap?: number
+        /**
+         * 水平间距
+         * @default 0
+         */
+        gapX?: number
+        /**
+         * 垂直间距
+         * @default 0
+         */
+        gapY?: number
+        /** 元素宽度 */
+        itemWidth: number
+        /** 元素高度 */
+        itemHeight: number
+        /** 元素的 key 到次序的映射 */
+        orderMap?: DraggableGridKeyToOrder
+        /** 次序变化时回调 */
+        onOrderMapChange?: (orderMap: DraggableGridKeyToOrder) => void
+        /** 禁用的元素 */
+        isItemDisabled?: Key[] | ((item: T, key: Key) => boolean)
+        /** 禁用的次序 */
+        isOrderDisabled?: number[] | ((order: number) => boolean)
+        /** 次序的优先级，可以通过此函数调整元素的优先放置的方向，左上，右上，左下，右下，中心，顺时针，逆时针等等 */
+        orderPriority?: (a: number, b: number) => number
+        /** 触发移动的元素 */
+        handle?: string | HTMLElement | ((item: T, key: Key, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null
+    } & (T extends ReactNode
         ? {
               /** 渲染函数，当 T 为 ReactNode 时，render 为可选 */
               render?: (item: T, status: DraggableGridItemStatus) => ReactNode
@@ -163,13 +167,26 @@ export type DraggableGridProps<T> = Omit<ComponentProps<"div">, "className" | "c
               keyExtractor: (item: T) => Key
           })
 
-interface DraggableGridItemProps extends ComponentProps<"div">, Omit<UseDragMoveParams<HTMLDivElement>, "element"> {}
+interface DraggableGridItemProps<T> extends ComponentProps<"div">, DragMoveEvents<HTMLDivElement> {
+    item: T
+    itemKey: Key
+    /** 触发移动的元素 */
+    handle?: string | HTMLElement | ((item: T, key: Key, element: HTMLDivElement) => HTMLElement | undefined | null) | undefined | null
+}
 
-const DraggableGridItem: FC<DraggableGridItemProps> = ({ onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }) => {
+function DraggableGridItem<T>({ item, itemKey, handle, onDragMoveStart, onDragMove, onDragMoveEnd, ...rest }: DraggableGridItemProps<T>) {
     const element = useRef<HTMLDivElement>(null)
 
     useDragMove({
-        element,
+        element: isNullable(handle)
+            ? element
+            : () =>
+                  element.current &&
+                  (typeof handle === "string"
+                      ? (element.current.querySelector(handle) as HTMLElement)
+                      : typeof handle === "function"
+                        ? handle(item, itemKey, element.current)
+                        : handle),
         onDragMoveStart,
         onDragMove,
         onDragMoveEnd,
@@ -211,20 +228,22 @@ export function DraggableGrid<T>({
     onOrderMapChange,
     render,
     keyExtractor,
-    isItemDisabled,
+    isItemDisabled: _isItemDisabled,
     isOrderDisabled,
     orderPriority,
+    handle,
+    onDragMoveStart: _onDragMoveStart,
+    onDragMove: _onDragMove,
+    onDragMoveEnd: _onDragMoveEnd,
     ...rest
 }: DraggableGridProps<T>) {
-    const [itemToKey, keyToItem] = useMemo(() => {
-        const itemToKey = new Map<T, Key>()
+    const keyToItem = useMemo(() => {
         const keyToItem = new Map<Key, T>()
-        items.forEach((item, index) => {
+        items.forEach(item => {
             const key = keyExtractor ? keyExtractor(item) : (item as Key)
-            itemToKey.set(item, key)
             keyToItem.set(key, item)
         })
-        return [itemToKey, keyToItem] as const
+        return keyToItem
     }, [items, keyExtractor])
 
     /** 检查 items 中是否有重复的 key */
@@ -258,16 +277,16 @@ export function DraggableGrid<T>({
     })
 
     useEffect(() => {
-        if (!isTheSameArray(cache.orders, orders) || !isTheSameIterable(cache.keys, keyToItem.keys())) {
+        if (!isTheSameArray(dragging?.orders ?? cache.orders, orders) || !isTheSameIterable(dragging?.keyToOrder.keys() ?? cache.keys, keyToItem.keys())) {
             cache.orders = orders
-            cache.keys = Array.from(keyToItem.keys())
-            const newOrderMap = getOrderMap({ prev: keyToOrder, orders, keys: cache.keys })
+            cache.keys = Array.from((dragging?.keyToOrder ?? keyToItem).keys())
+            const newOrderMap = getOrderMap({ prev: dragging?.keyToOrder ?? keyToOrder, orders, keys: cache.keys })
             setKeyToOrder(newOrderMap)
             onOrderMapChange?.(newOrderMap)
             const newRenderKeys = new Set(newOrderMap.keys())
             setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
         }
-    }, [dragging, orders, keyToItem, keyToOrder, onOrderMapChange])
+    }, [dragging, cache, orders, keyToItem, keyToOrder, onOrderMapChange])
 
     /** 渲染的元素的 key，不会随着 keyToOrder 的变化而变化 */
     const [renderKeys, setRenderKeys] = useState(() => new Set(keyToOrder.keys()))
@@ -293,7 +312,7 @@ export function DraggableGrid<T>({
                 onOrderMapChange?.(dragging.keyToOrder)
             }
         }
-    }, [orders, keyToItem, keyToOrder, onOrderMapChange])
+    }, [dragging, orders, columns, rows, gapX, gapY, itemWidth, itemHeight, keyToItem, keyToOrder, onOrderMapChange])
 
     /** 受控 */
     useEffect(() => {
@@ -303,14 +322,15 @@ export function DraggableGrid<T>({
     }, [orderMap, keyToOrder, onOrderMapChange])
 
     function onDragMoveStart(key: Key, event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMoveStart?.(event)
         const position = getPosition({ order: keyToOrder.get(key)!, columns, gapX, gapY, itemWidth, itemHeight })
         recent.current = key
         setDragging({
             key,
             startX: position.x,
             startY: position.y,
-            deltaX: 0,
-            deltaY: 0,
+            deltaX: event.deltaX,
+            deltaY: event.deltaY,
             orders,
             columns,
             rows,
@@ -323,6 +343,7 @@ export function DraggableGrid<T>({
     }
 
     function onDragMove(event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMove?.(event)
         if (!dragging) return
 
         const { deltaX, deltaY } = event
@@ -396,11 +417,18 @@ export function DraggableGrid<T>({
         onOrderMapChange?.(newKeyToOrder)
     }
 
-    function onDragMoveEnd() {
+    function onDragMoveEnd(event: DragMoveEvent<HTMLDivElement>) {
+        _onDragMoveEnd?.(event)
         if (!dragging) return
         setDragging(undefined)
     }
 
+    function isItemDisabled(key: Key) {
+        if (!_isItemDisabled) return false
+        if (Array.isArray(_isItemDisabled)) return _isItemDisabled.includes(key)
+        return _isItemDisabled(keyToItem.get(key)!, key)
+    }
+
     return (
         <div
             className={clsx(
@@ -446,14 +474,17 @@ export function DraggableGrid<T>({
                 return (
                     <DraggableGridItem
                         key={key}
+                        item={item}
+                        itemKey={key}
+                        handle={handle}
                         className={clsx(
                             styles.draggableGridItem,
                             typeof classNames?.item === "function" ? classNames.item({ order, isDragging: isDragging }) : classNames?.item,
                         )}
                         style={style}
-                        onDragMoveStart={!disabled ? event => onDragMoveStart(key, event) : undefined}
-                        onDragMove={!disabled ? onDragMove : undefined}
-                        onDragMoveEnd={!disabled ? onDragMoveEnd : undefined}
+                        onDragMoveStart={!disabled && !isItemDisabled(key) ? event => onDragMoveStart(key, event) : undefined}
+                        onDragMove={!disabled && !isItemDisabled(key) ? onDragMove : undefined}
+                        onDragMoveEnd={!disabled && !isItemDisabled(key) ? onDragMoveEnd : undefined}
                         children={children}
                     />
                 )