diff --git a/packages/components/src/draggable/Draggable.tsx b/packages/components/src/draggable/Draggable.tsx
index 9c16597..55dc09f 100644
--- a/packages/components/src/draggable/Draggable.tsx
+++ b/packages/components/src/draggable/Draggable.tsx
@@ -9,7 +9,7 @@ import { useDraggableChildren } from './hooks';
 import type { ReactElement, FC } from 'react';
 import { getClasses } from '@pkg/shared';
 
-export const cls = getClasses('draggable', ['ghost', 'item'], []);
+export const cls = getClasses('draggable', ['ghost', 'item'], ['hidden']);
 const defaultProps = {
   tag: 'div',
   list: [],
diff --git a/packages/components/src/draggable/DraggableGroup.tsx b/packages/components/src/draggable/DraggableGroup.tsx
new file mode 100644
index 0000000..f53a3f9
--- /dev/null
+++ b/packages/components/src/draggable/DraggableGroup.tsx
@@ -0,0 +1,44 @@
+import { createContext, ReactElement, useRef, FC } from 'react';
+import type { DraggableGroupProps } from './draggable.types';
+
+const defaultProps = {} satisfies Partial<DraggableGroupProps>;
+
+/**
+ * 在 dragstart 里生产，在 dragenter 消费，在 drop ｜ dragend 销毁
+ */
+export interface DraggableGroupContextProvider {
+  readonly children: ReactElement;
+  cancel?: (id: symbol) => void;
+  enter?: (id: symbol) => void;
+  drop?: (id: symbol) => void;
+  readonly item: unknown;
+  id: symbol;
+}
+export const draggableContext = createContext<{
+  fromRef: { current: DraggableGroupContextProvider | null };
+  toRef: { current: DraggableGroupContextProvider | null };
+  type: Exclude<DraggableGroupProps['type'], undefined>;
+}>({
+  fromRef: { current: null },
+  toRef: { current: null },
+  type: 'move',
+});
+
+export const DraggableGroup: FC<DraggableGroupProps> = (props) => {
+  const fromRef = useRef(null);
+  const toRef = useRef(null);
+  return (
+    <draggableContext.Provider
+      value={{
+        type: props.type || 'move',
+        fromRef,
+        toRef,
+      }}
+    >
+      {props.children}
+    </draggableContext.Provider>
+  );
+};
+
+DraggableGroup.defaultProps = defaultProps;
+DraggableGroup.displayName = 'DraggableGroup';
diff --git a/packages/components/src/draggable/demo/draggable-group.module.scss b/packages/components/src/draggable/demo/draggable-group.module.scss
new file mode 100644
index 0000000..c2d3dff
--- /dev/null
+++ b/packages/components/src/draggable/demo/draggable-group.module.scss
@@ -0,0 +1,23 @@
+.root {
+  :global {
+    .main {
+      display: flex;
+      margin-top: 1rem;
+    }
+    .t-draggable {
+      flex: 1;
+      + .t-draggable {
+        margin-left: 6px;
+      }
+    }
+    .draggable-item {
+      padding: 0 0.5rem;
+      border: 1px solid #e6e6e6;
+      background: #fff1d7;
+      line-height: 32px;
+      &.t-draggable__ghost {
+        background: #f6a306;
+      }
+    }
+  }
+}
diff --git a/packages/components/src/draggable/demo/draggable-group.tsx b/packages/components/src/draggable/demo/draggable-group.tsx
new file mode 100644
index 0000000..647e68b
--- /dev/null
+++ b/packages/components/src/draggable/demo/draggable-group.tsx
@@ -0,0 +1,50 @@
+/**
+ * title: 拖拽组
+ * description: 拖拽组分为两种拖拽方式，'move' 为移动数据，'copy' 为复制数据，默认为 'move'。
+ */
+
+import { DraggableGroup, Draggable, Select } from '@tool-pack/react-ui';
+import styles from './draggable-group.module.scss';
+import React, { useState } from 'react';
+
+const options = [
+  { label: 'move', value: 'move' },
+  { label: 'copy', value: 'copy' },
+];
+
+const App: React.FC = () => {
+  const [type, setType] = useState<'copy' | 'move'>('move');
+  const [state, setState] = React.useState<string[]>(['A', 'B', 'C', 'D']);
+  const [state2, setState2] = React.useState<string[]>(['a', 'b', 'c', 'd']);
+  return (
+    <div className={styles['root']}>
+      <Select
+        attrs={{ style: { display: 'inline-flex' } }}
+        onChange={setType}
+        options={options}
+        value={type}
+        size="small"
+      />
+      <div className="main">
+        <DraggableGroup type={type}>
+          <Draggable onChange={setState} list={state} key="left">
+            {state.map((item) => (
+              <div className="draggable-item" key={item}>
+                {item}
+              </div>
+            ))}
+          </Draggable>
+          <Draggable onChange={setState2} list={state2} key="right">
+            {state2.map((item) => (
+              <div className="draggable-item" key={item}>
+                {item}
+              </div>
+            ))}
+          </Draggable>
+        </DraggableGroup>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/packages/components/src/draggable/demo/draggable.tsx b/packages/components/src/draggable/demo/draggable.tsx
index d488572..eedc808 100644
--- a/packages/components/src/draggable/demo/draggable.tsx
+++ b/packages/components/src/draggable/demo/draggable.tsx
@@ -1,5 +1,5 @@
 /**
- * title: draggable
+ * title: 禁止拖拽选项
  * description: html 元素设置 draggable 为 false 时不可拖动。
  */
 
diff --git a/packages/components/src/draggable/demo/tag.tsx b/packages/components/src/draggable/demo/tag.tsx
index 3a3e609..045ba70 100644
--- a/packages/components/src/draggable/demo/tag.tsx
+++ b/packages/components/src/draggable/demo/tag.tsx
@@ -1,5 +1,5 @@
 /**
- * title: tag
+ * title: 根标签
  * description: 默认根元素为 div，当 tag 为 null 时 Draggable 组件不提供根元素。
  */
 
diff --git a/packages/components/src/draggable/demo/transition.tsx b/packages/components/src/draggable/demo/transition.tsx
index cd313db..3f4aac4 100644
--- a/packages/components/src/draggable/demo/transition.tsx
+++ b/packages/components/src/draggable/demo/transition.tsx
@@ -1,5 +1,5 @@
 /**
- * title: transition
+ * title: 动画
  * description: 开启 transition 动画。
  */
 
diff --git a/packages/components/src/draggable/draggable.types.ts b/packages/components/src/draggable/draggable.types.ts
index 03a5302..f2b6a17 100644
--- a/packages/components/src/draggable/draggable.types.ts
+++ b/packages/components/src/draggable/draggable.types.ts
@@ -10,3 +10,8 @@ export interface DraggableProps<T = unknown> extends PropsBase<HTMLDivElement> {
 }
 export type DraggableFC = <T>(props: DraggableProps<T>) => ReactElement;
 // export interface DraggableLocale {}
+
+export interface DraggableGroupProps {
+  children: ReactElement[];
+  type?: 'move' | 'copy';
+}
diff --git a/packages/components/src/draggable/hooks/useDraggableChildren.ts b/packages/components/src/draggable/hooks/useDraggableChildren.ts
index 173caad..205ab7b 100644
--- a/packages/components/src/draggable/hooks/useDraggableChildren.ts
+++ b/packages/components/src/draggable/hooks/useDraggableChildren.ts
@@ -1,14 +1,20 @@
+import {
+  DraggableGroupContextProvider,
+  draggableContext,
+} from '~/draggable/DraggableGroup';
 import {
   useChildrenWithRefs,
   useFollowingRef,
   useForceUpdate,
 } from '@pkg/shared';
-import { cloneElement, ReactNode, Children, useRef } from 'react';
-import type { DraggableProps } from '../draggable.types';
-import { getClassNames } from '@tool-pack/basic';
+import type { DOMAttributes, ReactElement, ReactNode, DragEvent } from 'react';
+import { cloneElement, useContext, Children, useRef } from 'react';
+import { getClassNames, insertToArray } from '@tool-pack/basic';
+import type { DraggableProps } from '~/draggable';
 import { moveItem } from '../utils';
 import { cls } from '../Draggable';
 
+let times = 0;
 export function useDraggableChildren({
   children: outerChildren,
   transition,
@@ -19,87 +25,258 @@ export function useDraggableChildren({
   'transition' | 'children' | 'onChange' | 'list'
 >): ReactNode {
   const forceUpdate = useForceUpdate();
-  const childrenRef = useFollowingRef(outerChildren, (v) =>
-    Children.toArray(v),
+  const modifyChildrenRef = useFollowingRef(
+    outerChildren,
+    (v) => Children.map(v, (i) => i) || [],
   );
-  const listRef = useFollowingRef(list, (v) => v.slice());
-  const chosenRef = useRef<{
-    overIndex: number;
-    index: number;
-    item: any;
-  } | null>(null);
+  const listRef = useFollowingRef(list, (v) => ({
+    origin: v.slice(),
+    modify: v.slice(),
+  }));
+  const { fromRef, toRef, type } = useContext(draggableContext);
+
+  const stateRef = useRef<{ readonly id: symbol; index: number }>({
+    id: Symbol(times++),
+    index: -1,
+  });
 
   const [children] = useChildrenWithRefs(
-    childrenRef.current,
-    (el, props, index) => {
+    modifyChildrenRef.current,
+    (el, props, idx) => {
+      const id = stateRef.current.id;
+      const item = listRef.current.modify[idx];
+      const emit = (): void => {
+        // preverRef.current = null;
+        if (isListChanged()) {
+          const result = listRef.current.modify.slice();
+          onChange?.(result);
+        }
+      };
       return cloneElement(el, {
-        // 拖动目标元素事件
-        onDragStart: (e: DragEvent) => {
-          const dataTransfer = e.dataTransfer as DataTransfer;
-          // dataTransfer.setData('text', `draggable:${index}`);
-          dataTransfer.effectAllowed = 'move';
-          chosenRef.current = {
-            item: listRef.current[index],
-            overIndex: index,
-            index,
-          };
-          const el = e.currentTarget as HTMLElement;
-          el.classList.add(cls.__.ghost);
-        },
-        onDragEnd: (e: DragEvent) => {
-          const el = e.currentTarget as HTMLElement;
-          el.classList.remove(cls.__.ghost);
-        },
-        // 接受拖动目标的元素的事件
-        // eslint-disable-next-line perfectionist/sort-objects
-        onDrop: (e: DragEvent) => {
-          // const dataTransfer = e.dataTransfer as DataTransfer;
-          // const di = dataTransfer.getData('text').replace('draggable:', '');
-          //
-          // if (!di) return;
-          // const from = Number(di);
-          // dataTransfer.clearData();
-          //
-          // if (from === index) return;
-          // move(from, index);
-          if (list.some((it, i) => it !== listRef.current[i]))
-            onChange?.(listRef.current.slice());
-          e.preventDefault();
-        },
-        onDragEnterCapture(e: DragEvent) {
-          const target = e.target as HTMLElement;
-          const chosen = chosenRef.current;
-          if (
-            !chosen ||
-            chosen.overIndex === index ||
-            el.props.draggable === false ||
-            (transition && target.className.includes('move-active'))
-          )
-            return;
-
-          move(chosen.index, index);
-          chosen.overIndex = index;
-          chosen.index = index;
-        },
-        onDragOver(e: DragEvent) {
-          if (el.props.draggable === false) return;
-          e.preventDefault(); // 必须 preventDefault onDrop 才能被触发
-        },
+        ...getDragSideEvents(),
+        ...getReceiveSideEvents(),
         className: getClassNames(el.props.className, cls.__.item),
         draggable: el.props.draggable ?? true,
         ref: props.ref,
       });
+
+      // 拖动目标元素事件
+      function getDragSideEvents() {
+        const left: DOMAttributes<HTMLElement> = {
+          onDragStart: (e: DragEvent) => {
+            const dataTransfer = e.dataTransfer as DataTransfer;
+            // dataTransfer.setData('text', `draggable:${index}`);
+            dataTransfer.effectAllowed = 'move';
+            const from: DraggableGroupContextProvider = {
+              drop(id2) {
+                if (type === 'move' && id2 !== id) {
+                  removeItem(item);
+                }
+                from.cancel = undefined;
+                emit();
+              },
+              cancel(_id2): void {
+                if (type === 'move') {
+                  updateChildrenOf(el, listRef.current.modify.indexOf(item));
+                }
+              },
+              children: el,
+              item,
+              id,
+            };
+            fromRef.current = from;
+            // const target = e.currentTarget as HTMLElement;
+            // target.classList.add(cls.__.ghost);
+          },
+          onDragEnd: (e: DragEvent) => {
+            // const target = e.currentTarget as HTMLElement;
+            // target.classList.remove(cls.__.ghost);
+            toRef.current?.cancel?.(id);
+            fromRef.current?.cancel?.(id);
+            // emit();
+            fromRef.current = null;
+            toRef.current = null;
+            stateRef.current.index = -1;
+            e.preventDefault();
+          },
+        };
+        return left;
+      }
+      // 接受拖动目标的元素的事件
+      function getReceiveSideEvents() {
+        const right: DOMAttributes<HTMLElement> = {
+          // eslint-disable-next-line perfectionist/sort-objects
+          onDrop: (e: DragEvent) => {
+            // const dataTransfer = e.dataTransfer as DataTransfer;
+            // const di = dataTransfer.getData('text').replace('draggable:', '');
+            //
+            // if (!di) return;
+            // const from = Number(di);
+            // dataTransfer.clearData();
+            //
+            // if (from === index) return;
+            // move(from, index);
+            e.preventDefault();
+            stateRef.current.index = -1;
+
+            const from = fromRef.current;
+            if (!from) return;
+
+            if (from.id !== id) from.drop?.(id);
+            else if (!isListChanged()) {
+              // 当在同一个组件拖动过但又没有实际变动时，刷新当前拖动项的选中状态
+              updateChildrenOf(from.children, idx);
+            }
+            // 在同一个组件内拖拽的话 to = from
+            // if (from.id !== toRef.current?.id) toRef.current?.drop?.(id);
+            const to = toRef.current;
+            if (to) to.cancel = undefined;
+            fromRef.current = null;
+            toRef.current = null;
+            emit();
+          },
+          // eslint-disable-next-line perfectionist/sort-objects
+          onDragEnterCapture(e: DragEvent): void {
+            const index = listRef.current.modify.indexOf(item);
+            const target = e.target as HTMLElement;
+            e.preventDefault();
+
+            if (
+              index === stateRef.current.index ||
+              el.props.draggable === false ||
+              (transition && target.className.includes('move-active'))
+            )
+              return;
+
+            const from = fromRef.current;
+            const prever = toRef.current || from;
+            if (!prever || !from) return;
+            prever.enter?.(id);
+
+            const fromIndex = listRef.current.modify.indexOf(from.item);
+            if (from.item !== item) {
+              if (prever.id === id || fromIndex !== -1) {
+                let toIndex = index;
+                const modifyChildren = modifyChildrenRef.current[
+                  fromIndex
+                ] as ReactElement;
+                // move 返回之前隐藏的 children 位置，如果存在则 index - 1
+                if (
+                  type === 'move' &&
+                  fromIndex !== -1 &&
+                  fromIndex < index &&
+                  modifyChildren.props.className.includes(cls['--'].hidden)
+                ) {
+                  toIndex--;
+                }
+                move(cloneAndAddClassName(from.children), fromIndex, toIndex);
+              } else moveFromGroup(from.item, from.children, index);
+            } else {
+              updateChildrenOf(
+                cloneAndAddClassName(
+                  modifyChildrenRef.current[fromIndex] as ReactElement,
+                ),
+                fromIndex,
+              );
+            }
+            // target.classList.remove(cls['--'].hidden);
+            stateRef.current.index = index;
+            toRef.current = {
+              enter: (id2): void => {
+                if (id2 !== id) {
+                  stateRef.current.index = -1;
+                  if (!listRef.current.origin.includes(from.item)) {
+                    removeItem(from.item);
+                  }
+                  if (type === 'move') {
+                    updateChildrenOf(
+                      cloneAndAddClassName(from.children, cls['--'].hidden),
+                      listRef.current.modify.indexOf(from.item),
+                    );
+                  }
+                  return;
+                }
+                stateRef.current.index = -1;
+              },
+              cancel: (_id2): void => {
+                stateRef.current.index = -1;
+                if (!listRef.current.origin.includes(from.item)) {
+                  removeItem(from.item);
+                  toRef.current = null;
+                } else {
+                  const index = listRef.current.modify.indexOf(from.item);
+                  // 还原成未加工状态
+                  updateChildrenOf(from.children, index);
+                }
+              },
+              drop: (_id2): void => {
+                // if (toRef.current) toRef.current.cancel = undefined;
+                // emit();
+              },
+              children: el,
+              item,
+              id,
+            };
+          },
+          onDragOver(e: DragEvent) {
+            if (el.props.draggable === false) return;
+            e.preventDefault(); // 必须 preventDefault onDrop 才能被触发
+          },
+        };
+        return right;
+      }
     },
   );
 
   return children;
 
-  function move(from: number, to: number) {
-    if (from === to) return;
-    const temp = childrenRef.current.slice();
+  function move(children: ReactElement, from: number, to: number) {
+    // if (from === -1 || from === to) return;
+    const temp = modifyChildrenRef.current.slice();
+    temp[from] = children;
     moveItem(temp, from, to);
-    childrenRef.current = temp;
-    moveItem(listRef.current, from, to);
+    modifyChildrenRef.current = temp;
+    moveItem(listRef.current.modify, from, to);
     forceUpdate();
   }
+  function moveFromGroup(item: unknown, children: ReactElement, to: number) {
+    children = cloneAndAddClassName(children);
+    const temp = modifyChildrenRef.current.slice();
+    insertToArray(children, to, temp);
+    modifyChildrenRef.current = temp;
+    insertToArray(item, to, listRef.current.modify);
+    forceUpdate();
+  }
+  function updateChildrenOf(children: ReactElement, index: number): void {
+    const temp = modifyChildrenRef.current.slice();
+    // 还原成未加工状态
+    temp[index] = children;
+    modifyChildrenRef.current = temp;
+    forceUpdate();
+  }
+  function cloneAndAddClassName(
+    element: ReactElement,
+    className = cls.__.ghost,
+  ): ReactElement {
+    return cloneElement(element, {
+      className: getClassNames(element.props.className, className),
+    });
+  }
+  function removeItem(item: unknown): void {
+    const index = listRef.current.modify.indexOf(item);
+    if (index === -1) return;
+    listRef.current.modify.splice(index, 1);
+
+    const temp = modifyChildrenRef.current.slice();
+    temp.splice(index, 1);
+    modifyChildrenRef.current = temp;
+    forceUpdate();
+  }
+  function isListChanged(): boolean {
+    const { origin, modify } = listRef.current;
+    return (
+      origin.length !== modify.length ||
+      origin.some((it, i) => it !== modify[i])
+    );
+  }
 }
diff --git a/packages/components/src/draggable/index.en-US.md b/packages/components/src/draggable/index.en-US.md
index 14c82a2..aef0f5e 100644
--- a/packages/components/src/draggable/index.en-US.md
+++ b/packages/components/src/draggable/index.en-US.md
@@ -18,17 +18,26 @@ Draggable 拖拽。
 <code src="./demo/tag.tsx"></code>
 <code src="./demo/transition.tsx"></code>
 <code src="./demo/transition-debug.tsx"></code>
+<code src="./demo/draggable-group.tsx"></code>
 
 ## API
 
+### Draggable
+
 Draggable 的属性说明如下：
 
-| 属性       | 说明             | 类型                                                      | 默认值 | 版本 |
-| ---------- | ---------------- | --------------------------------------------------------- | ------ | ---- |
-| list       | 列表对应的数组   | any[]                                                     | --     | --   |
-| onChange   | 列表改动回调     | (list: T[]) => void                                       | --     | --   |
-| tag        | 组件 html 根元素 | string \| null                                            | 'div'  | --   |
-| transition | 动画效果         | boolean \| [TransitionGroupProps](./transition-group#api) | 'div'  | --   |
-| attrs      | html 标签属性    | Partial\<React.HTMLAttributes\<HTMLDivElement>>           | --     | --   |
+| 属性       | 说明             | 类型                                                         | 默认值 | 版本 |
+| ---------- | ---------------- | ------------------------------------------------------------ | ------ | ---- |
+| list       | 列表对应的数组   | any[]                                                        | --     | --   |
+| onChange   | 列表改动回调     | (list: T[]) => void                                          | --     | --   |
+| tag        | 组件 html 根元素 | string \| null                                               | 'div'  | --   |
+| transition | 动画效果         | boolean \| [TransitionGroupProps](./transition-group-cn#api) | 'div'  | --   |
+| attrs      | html 标签属性    | Partial\<React.HTMLAttributes\<HTMLDivElement>>              | --     | --   |
+
+### DraggableGroup
+
+DraggableGroup 的属性说明如下：
 
-其他说明。
+| 属性 | 说明                               | 类型             | 默认值 | 版本 |
+| ---- | ---------------------------------- | ---------------- | ------ | ---- |
+| type | 拖动类型，对拖动数据是复制还是移动 | 'copy' \| 'move' | 'move' | --   |
diff --git a/packages/components/src/draggable/index.scss b/packages/components/src/draggable/index.scss
index c1347d4..6739f09 100644
--- a/packages/components/src/draggable/index.scss
+++ b/packages/components/src/draggable/index.scss
@@ -16,4 +16,7 @@ $r: Name.$draggable;
       cursor: no-drop;
     }
   }
+  &--hidden {
+    display: none;
+  }
 }
diff --git a/packages/components/src/draggable/index.ts b/packages/components/src/draggable/index.ts
index 55a5101..37ab266 100644
--- a/packages/components/src/draggable/index.ts
+++ b/packages/components/src/draggable/index.ts
@@ -1,2 +1,3 @@
 export type { DraggableProps } from './draggable.types';
+export { DraggableGroup } from './DraggableGroup';
 export { Draggable } from './Draggable';
diff --git a/packages/components/src/draggable/index.zh-CN.md b/packages/components/src/draggable/index.zh-CN.md
index fc21420..0c2d5e9 100644
--- a/packages/components/src/draggable/index.zh-CN.md
+++ b/packages/components/src/draggable/index.zh-CN.md
@@ -18,9 +18,12 @@ Draggable 拖拽。
 <code src="./demo/tag.tsx"></code>
 <code src="./demo/transition.tsx"></code>
 <code src="./demo/transition-debug.tsx"></code>
+<code src="./demo/draggable-group.tsx"></code>
 
 ## API
 
+### Draggable
+
 Draggable 的属性说明如下：
 
 | 属性       | 说明             | 类型                                                         | 默认值 | 版本 |
@@ -31,4 +34,10 @@ Draggable 的属性说明如下：
 | transition | 动画效果         | boolean \| [TransitionGroupProps](./transition-group-cn#api) | 'div'  | --   |
 | attrs      | html 标签属性    | Partial\<React.HTMLAttributes\<HTMLDivElement>>              | --     | --   |
 
-其他说明。
+### DraggableGroup
+
+DraggableGroup 的属性说明如下：
+
+| 属性 | 说明                               | 类型             | 默认值 | 版本 |
+| ---- | ---------------------------------- | ---------------- | ------ | ---- |
+| type | 拖动类型，对拖动数据是复制还是移动 | 'copy' \| 'move' | 'move' | --   |