[New component] DragMove (#2595)

* feat: add DragMove Component

* feat: add DragMove component

* chore: remove useless code

* feat: add DragMove

* chore: storybook example

* fix: Fix the Type error when using class components as children of DragMove

* chore: docs example

---------

Co-authored-by: pointhalo <[email protected]>

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 78
+order: 79
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 78
+order: 79
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 79
+order: 80
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 79
+order: 80
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 80
+order: 81
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 80
+order: 81
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 81
+order: 82
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 81
+order: 82
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 82
+order: 83
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 82
+order: 83
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 83
+order: 84
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 83
+order: 84
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 84
+order: 85
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 84
+order: 85
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

content/input/autocomplete/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title: AutoComplete
 icon: doc-autocomplete

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete

content/input/cascader/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader

content/input/checkbox/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title:  Checkbox
 subTitle: Checkbox

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox

content/input/colorpicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title: ColorPicker
 icon: doc-colorPlatteNew

content/input/colorpicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: ColorPicker 颜色选择器
 icon: doc-colorPlatteNew

content/input/datepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: DatePicker
 subTitle: Date Selector

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker

content/input/form/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Input
 title:  Form
 subTitle: Form

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 输入类
 title:  Form 表单
 icon: doc-form

content/input/input/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 输入类
 title:  Input 输入框
 icon: doc-input

content/input/inputnumber/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

content/input/pincode/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Input
 title: PinCode
 icon: doc-pincode

content/input/pincode/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 输入类
 title: PinCode 验证码输入
 icon: doc-pincode

content/input/radio/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Input
 title: Radio
 subTitle: Radio

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 输入类
 title: Radio 单选框
 icon: doc-radio

content/input/rating/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

content/input/select/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Input
 title: Select
 subTitle: Select

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 输入类
 title: Select 选择器
 icon: doc-select

content/input/slider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

content/input/switch/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Input
 title: Switch
 subTitle: Switch

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 输入类
 title: Switch 开关
 icon: doc-switch

content/input/taginput/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

content/input/timepicker/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Input
 title: TimePicker
 subTitle: TimePicker

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker

content/input/transfer/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

content/input/treeselect/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

content/input/upload/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Input
 title: Upload
 icon: doc-upload

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 输入类
 title: Upload 上传
 icon: doc-upload

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Navigation
 title:  Anchor
 subTitle: Anchor

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 50
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 51
 category: Navigation
 title:  Navigation
 subTitle: Navigation

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 50
+order: 51
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 51
+order: 52
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 51
+order: 52
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 52
+order: 53
 category: Navigation
 title: Steps
 subTitle: Steps

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 52
+order: 53
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 53
+order: 54
 category: Navigation
 title: Tabs
 subTitle: Tabs

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 53
+order: 54
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 54
+order: 55
 category: Navigation
 title:  Tree
 subTitle: Tree

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 54
+order: 55
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree

content/order.js

@@ -26,6 +26,7 @@ const order = [
     "markdownrender",
     'hotkeys',
     "lottie",
+    "dragMove",
     'autocomplete',
     'cascader',
     'checkbox',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 85
+order: 86
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 85
+order: 86
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 86
+order: 87
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 86
+order: 87
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/plus/dragMove/index-en-US.md

@@ -0,0 +1,236 @@
+---
+localeCode: en-US
+order: 28
+category: Plus
+title:  DragMove
+icon: doc-configprovider
+dir: column
+brief: Set elements to change their position by dragging
+showNew: true
+---
+
+## When to use
+
+It is used to set the element that can be dragged to change its position. It supports limiting the drag range and customizing the elements that trigger dragging.
+
+## Demos
+
+### How to introduce
+
+DragMove supported from v2.71.0.
+
+```jsx
+import { DragMove } from '@douyinfe/semi-ui';
+```
+
+### Basic usage
+
+Elements wrapped by `DragMove` will be able to change their position by dragging.
+
+***Notice***
+
+1. DragMove will set the draggable element to absolute positioning
+2. DragMove needs to apply DOM event listeners to children. If the child element is a custom component, you need to ensure that it can pass properties to the underlying DOM element. The following types of children are supported:
+    1. Class Component, it is not mandatory to bind ref, but you need to ensure that props can be transparently transmitted to the real DOM node 
+    2. Use the functional component wrapped by forwardRef to transparently transmit props and ref to the real DOM node in children 
+    3. Real DOM nodes, such as span, div, p...  
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  return (
+    <DragMove>
+      <div 
+        style={{ backgroundColor: 'var(--semi-color-primary)',width: 80, height: 80, 
+          display: 'flex', alignItems: 'center',justifyContent: 'center', 
+          borderRadius: 10, fontWeight: 500,
+          position: 'absolute',  color: 'rgba(var(--semi-white), 1)'
+        }} 
+      >Drag me</div>
+    </DragMove>
+  );
+}
+
+```
+
+### Limit drag range
+
+Passing in `constrainer`, this function returns the elements that limit the draggable range.
+
+***Note: The elements returned by the constrainer need to be positioned relative***
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ 
+        backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        constrainer={() => containerRef.current}
+      >
+      <div 
+          style={{ backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            position: 'absolute', top: 80, left: 80,
+          }}
+        >Drag me</div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### Customize elements that trigger dragging
+
+Passing in `handler`, this function returns the element that triggered the drag. If not set, you can click anywhere to drag; if set, only the part of the element returned by the handler can be dragged.
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { IconTransparentStroked } from '@douyinfe/semi-icons';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo(){
+  const handlerRef = React.useRef();
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        handler={() => handlerRef.current}
+        constrainer={() => containerRef.current}
+      >
+        <div 
+          style={{ 
+            backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            position: 'absolute', top: 50, left: 50,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}
+        >
+          <div 
+              style={{ width: 'fit-content', height: 'fit-content' }} 
+              ref={handlerRef}
+          ><IconTransparentStroked size={'large'}/></div>
+        </div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### Customize position processing after dragging
+
+You can customize the position processing after dragging through `customMove`. After this parameter is set, the DragMove component will only return the calculated position through the parameters without setting it. The user can set the new position as needed.
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function CustomMove() {
+  const containerRef = React.useRef();
+  const elementRef = React.useRef();
+  const startPoint = React.useRef();
+
+  const customMove = useCallback((element, top, left) => {
+    if (left + 100 > containerRef.current.offsetWidth) {
+      element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px`
+      element.style.left = 'auto';
+    } else {
+      element.style.left = left + 'px';
+    } 
+    element.style.top = top + 'px';
+  }, [])
+
+  const onMouseDown = useCallback((e) => {
+    startPoint.current = {
+      x: e.clientX,
+      y: e.clientY,
+    }
+  }, []);
+
+  const onMouseUp = useCallback((e) => {
+    if (startPoint.current) {
+      const { x, y } = startPoint.current;
+      if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) {
+        if (elementRef.current.style.width === '50px') {
+          elementRef.current.style.width = '100px';
+        } else {
+          elementRef.current.style.width = '50px';
+        }
+      }
+    }
+    startPoint.current = null;
+  }, []);
+
+  return (
+    <>
+      <span>Click on the blue color block to change the width. The blue color block will not exceed the range limit before and after the change.</span>
+      <br /><br />
+      <div 
+        style={{ 
+          backgroundColor: 'rgba(var(--semi-grey-2), 1)', width: 300, height: 300, 
+          position: 'relative', padding: 10,
+          color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+        }} 
+        ref={containerRef}
+      >
+        <span>Constrainer</span>
+        <DragMove
+          constrainer={() => containerRef.current}
+          customMove={customMove}
+        >
+          <div
+            style={{ backgroundColor: 'var(--semi-color-primary)',width: 50, height: 50,
+              display: 'flex', alignItems: 'center',justifyContent: 'center',
+              position: 'absolute', top: 50, left: 50, borderRadius: 10, padding: 5
+            }}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            ref={elementRef}
+          >Drag me</div>
+        </DragMove>
+      </div> 
+    </>
+  )
+}
+
+```
+
+
+### API
+
+| Property | Description | Type | Default value |
+| --- | --- | --- | ----- |
+| allowInputDrag | Whether to allow dragging when clicking on native input/textarea | boolean | false |
+| allowMove | Determine whether dragging is allowed when clicking/touching. | (event: TouchEvent \|MouseEvent, element: ReactNode) => boolean | - |
+| constrainer | Returns the element that limits the draggable range. | () => ReactNode \| 'parent' | - |
+| customMove | Customize position processing after dragging| (element: ReactNode, top: number, left: number) => void | -|
+| handler | Returns the element that triggers dragging. | () => ReactNode | - |
+| onMouseDown | Callback when mouse is pressed | (e: MouseEvent) => void | - |
+| onMouseMove | Callback when mouse moves | (e: MouseEvent) => void | - |
+| onMouseUp | Callback when mouse is raised | (e: MouseEvent) => void | - |
+| onTouchCancel | Callback when touch cancels | (e: TouchEvent) => void | - |
+| onTouchEnd | callback when touch ends | (e: TouchEvent) => void | - |
+| onTouchMove | Callback when touch moves | (e: TouchEvent) => void | - |
+| onTouchStart | Callback when touch starts | (e: TouchEvent) => void | - |

content/plus/dragMove/index.md

@@ -0,0 +1,237 @@
+---
+localeCode: zh-CN
+order: 28
+category: Plus
+title:  DragMove 拖拽移动
+icon: doc-configprovider
+dir: column
+brief: 可通过拖拽改变位置
+showNew: true
+---
+
+## 使用场景
+
+用于设置元素可被拖动改变位置，支持限制拖拽范围，支持自定义触发拖动的元素。
+
+## 代码演示
+
+### 如何引入
+
+DragMove 从 v2.71.0 开始支持
+
+```jsx
+import { DragMove } from '@douyinfe/semi-ui';
+```
+
+### 基本用法
+
+被 `DragMove` 包裹的元素将能够通过拖拽改变位置。
+
+***注意***
+
+1. DragMove 会将可拖拽的元素设置为 absolute 定位
+2. DragMove 需要将 DOM 事件监听器应用到 children 中，如果子元素是自定义的组件，你需要确保它能将属性传递至底层的 DOM 元素。支持以下类型的 children：
+    1. Class Component，不强制绑定ref，但需要确保 props 可被透传至真实的 DOM 节点上
+    2. 使用 forwardRef 包裹后的函数式组件，将 props 与 ref 透传到 children 内真实的 DOM 节点上
+    3. 真实 DOM 节点, 如 span，div，p...
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  return (
+    <DragMove>
+      <div 
+        style={{ backgroundColor: 'var(--semi-color-primary)',width: 80, height: 80, 
+          display: 'flex', alignItems: 'center',justifyContent: 'center', 
+          borderRadius: 10, fontWeight: 500,
+          position: 'absolute',  color: 'rgba(var(--semi-white), 1)'
+        }} 
+      >Drag me</div>
+    </DragMove>
+  );
+}
+
+```
+
+### 限制拖动范围
+
+传入 `constrainer`, 该函数返回限制可拖拽范围的元素。
+
+***注意：constrainer 设置的元素需要为 relative 定位***
+
+```jsx live=true
+import React, { useRef, useEffect } from 'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo() {
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ 
+        backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        constrainer={() => containerRef.current}
+      >
+      <div 
+          style={{ backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            position: 'absolute', top: 80, left: 80,
+          }}
+        >Drag me</div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### 自定义触发拖动的元素
+
+可通过 `handler` 自定义触发拖动的元素。如果不设置, 则点击任意位置均可拖动；如果设置，则仅点击 handler 部分可拖动。
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { IconTransparentStroked } from '@douyinfe/semi-icons';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function Demo(){
+  const handlerRef = React.useRef();
+  const containerRef = React.useRef();
+
+  return (
+    <div 
+      style={{ backgroundColor: 'rgba(var(--semi-grey-2), 1)', 
+        width: 300, height: 300, padding: 5, position: 'relative', 
+        color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+      }} 
+      ref={containerRef}
+    >
+      <span>Constrainer</span>
+      <DragMove
+        handler={() => handlerRef.current}
+        constrainer={() => containerRef.current}
+      >
+        <div 
+          style={{ 
+            backgroundColor: 'var(--semi-color-primary)', 
+            width: 80, height: 80, borderRadius: 10,
+            position: 'absolute', top: 50, left: 50,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}
+        >
+          <div 
+              style={{ width: 'fit-content', height: 'fit-content' }} 
+              ref={handlerRef}
+          ><IconTransparentStroked size={'large'}/></div>
+        </div>
+      </DragMove>
+    </div>
+  )
+}
+```
+
+### 自定义拖动后的位置处理
+
+可通过 `customMove` 自定义拖动后的位置处理，该参数设置后，DragMove 组件内部将仅通过参数返回计算后的位置，不做设置，用户按需自行设置新位置。
+
+```jsx live=true
+import React, { useRef, useEffect } from'react';
+import { DragMove } from '@douyinfe/semi-ui';
+
+function CustomMove() {
+  const containerRef = React.useRef();
+  const elementRef = React.useRef();
+  const startPoint = React.useRef();
+
+  const customMove = useCallback((element, top, left) => {
+    if (left + 100 > containerRef.current.offsetWidth) {
+      element.style.right = `${containerRef.current.offsetWidth - left - element.offsetWidth}px`
+      element.style.left = 'auto';
+    } else {
+      element.style.left = left + 'px';
+    } 
+    element.style.top = top + 'px';
+  }, [])
+
+  const onMouseDown = useCallback((e) => {
+    startPoint.current = {
+      x: e.clientX,
+      y: e.clientY,
+    }
+  }, []);
+
+  const onMouseUp = useCallback((e) => {
+    if (startPoint.current) {
+      const { x, y } = startPoint.current;
+      if (Math.abs(e.clientX - x) < 5 && Math.abs(e.clientY - y) < 5) {
+        if (elementRef.current.style.width === '60px') {
+          elementRef.current.style.width = '100px';
+        } else {
+          elementRef.current.style.width = '60px';
+        }
+      }
+    }
+    startPoint.current = null;
+  }, []);
+
+  return (
+    <>
+      <span>蓝色色块点击可改变宽度，改变前后蓝色色块均不会超出范围限制 </span>
+      <br /><br />
+      <div 
+        style={{ 
+          backgroundColor: 'rgba(var(--semi-grey-2), 1)', width: 300, height: 300, 
+          position: 'relative', padding: 10,
+          color: 'rgba(var(--semi-white), 1)', fontWeight: 500,
+        }} 
+        ref={containerRef}
+      >
+        <span>Constrainer</span>
+        <DragMove
+          constrainer={() => containerRef.current}
+          customMove={customMove}
+        >
+          <div
+            style={{ backgroundColor: 'var(--semi-color-primary)',width: 60, height: 50,
+              display: 'flex', alignItems: 'center',justifyContent: 'center',
+              position: 'absolute', top: 50, left: 50, borderRadius: 10, padding: 5
+            }}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+            ref={elementRef}
+          >Drag me</div>
+        </DragMove>
+      </div> 
+    </>
+  )
+}
+
+```
+
+
+
+### API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | ----- |
+| allowInputDrag | 点击原生 input/textarea 时是否允许拖动 | boolean | false |
+| allowMove | 点击/触摸时是否允许拖动的判断函数 | (event: TouchEvent \|MouseEvent, element: ReactNode) => boolean | - |
+| constrainer | 返回限制可拖拽的范围的元素 | () => ReactNode | - |
+| customMove | 自定义拖动后的位置处理| (element: ReactNode, top: number, left: number) => void | -|
+| handler | 返回触发拖动的元素 | () => ReactNode | - |
+| onMouseDown | 鼠标按下时的回调 | (e: MouseEvent) => void | - |
+| onMouseMove | 鼠标移动时的回调 | (e: MouseEvent) => void | - |
+| onMouseUp | 鼠标抬起时的回调 | (e: MouseEvent) => void | - |
+| onTouchCancel | 触摸取消时的回调 | (e: TouchEvent) => void | - |
+| onTouchEnd | 触摸结束时的回调 | (e: TouchEvent) => void | - |
+| onTouchMove | 触摸移动时的回调 | (e: TouchEvent) => void | - |
+| onTouchStart | 触摸开始时的回调 | (e: TouchEvent) => void | - |

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 55
+order: 56
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 55
+order: 56
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 56
+order: 57
 category: Show
 title:  Badge
 subTitle: Badge

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 56
+order: 57
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 57
+order: 58
 category: Show
 title:  Calendar
 subTitle: Calendar

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 57
+order: 58
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 58
+order: 59
 category: Show
 title:  Card
 subTitle: Card

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 58
+order: 59
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片

content/show/carousel/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 59
+order: 60
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 59
+order: 60
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

content/show/chart/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 77
+order: 78
 category: Show
 title: Data Visualization
 icon: doc-vchart

content/show/chart/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 77
+order: 78
 category: 展示类
 title:  Data Visualization 数据可视化
 icon: doc-vchart

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 60
+order: 61
 category: Show
 title: Collapse
 subTitle: Collapse

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 60
+order: 61
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 61
+order: 62
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 61
+order: 62
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 62
+order: 63
 category: Show
 title: Description
 subTitle: Descriptions

content/show/descriptions/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 62
+order: 63
 category: 展示类
 title: Descriptions 描述列表
 icon: doc-descriptions

content/show/dropdown/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Show
 title: Dropdown
 subTitle: Dropdown

content/show/dropdown/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 展示类
 title: Dropdown 下拉框
 icon: doc-dropdown

content/show/empty/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Show
 title: Empty
 subTitle: Empty

content/show/empty/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 展示类
 title: Empty 空状态
 icon: doc-empty

content/show/highlight/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 65
+order: 66
 category: Show
 title: Highlight 
 icon: doc-highlight

content/show/highlight/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 65
+order: 66
 category: 展示类
 title: Highlight 高亮文本
 icon: doc-highlight

content/show/image/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Show
 title: Image
 icon: doc-image