diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbfd405bb02eef2f77874c71b6da7b2e14f976cc..7ae6e686ffb2cbd9a0bb4e9dbc62337434354e96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - 新增列表新建和拖拽功能
 - 新增表格动态控件参数grouprowmode，控制分组行模式
 - 新增重复器表格排序
+- 新增卡片，列表，看板项拖拽图标
 
 ### Changed
 
diff --git a/src/control/data-view/data-view.scss b/src/control/data-view/data-view.scss
index 409d19a32d4a101d6c146958efa90b0395db1c91..6d01d45bdf1c7f08be898708050370d444ecf97e 100644
--- a/src/control/data-view/data-view.scss
+++ b/src/control/data-view/data-view.scss
@@ -39,6 +39,10 @@ $control-dataview-group-item-content: (
     cursor: pointer;
   }
 
+  @include e(drag-icon) {
+    cursor: move;
+  }
+  
   // 内容区样式
   @include e(content) {
     flex-grow: 1;
diff --git a/src/control/data-view/data-view.tsx b/src/control/data-view/data-view.tsx
index f31e59e7d7b2b8976ca490e1e306e4402134a251..351f31a4592c6f80a2a751a5ede2503c90fcd1ba 100644
--- a/src/control/data-view/data-view.tsx
+++ b/src/control/data-view/data-view.tsx
@@ -359,6 +359,23 @@ export const DataViewControl = defineComponent({
           }
         >
           <div class={ns.be('item', 'content')}>
+            {c.state.draggable && !c.state.readonly && (
+              <svg
+                viewBox='0 0 16 16'
+                xmlns='http://www.w3.org/2000/svg'
+                height='1em'
+                width='1em'
+                class={ns.e('drag-icon')}
+                preserveAspectRatio='xMidYMid meet'
+                focusable='false'
+              >
+                <g stroke-width='1' fill-rule='evenodd'>
+                  <g transform='translate(5 1)' fill-rule='nonzero'>
+                    <path d='M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'></path>
+                  </g>
+                </g>
+              </svg>
+            )}
             {cardStyle.value === 'style2' && !c.state.singleSelect && (
               <el-checkbox
                 size='large'
@@ -392,6 +409,7 @@ export const DataViewControl = defineComponent({
             itemKey='srfkey'
             modelValue={items}
             group={c.model.id}
+            handle={`.${ns.e('drag-icon')}`}
             class={['el-row', ns.e('layout-row')]}
             disabled={disabled || c.state.updating || c.state.readonly}
             onChange={(evt: IData) => onDraggableChange(evt, group?.key)}
diff --git a/src/control/kanban/kanban.scss b/src/control/kanban/kanban.scss
index 5c372a2effa175f8741a2b8d5f54127bf635bf26..c3d2acab4ff5531e213f11e763d74ad6695614dc 100644
--- a/src/control/kanban/kanban.scss
+++ b/src/control/kanban/kanban.scss
@@ -21,6 +21,11 @@ $control-kanban: (
     }
   }
 
+  @include e(drag-icon) {
+    margin-right: getCssVar('spacing', 'tight');
+    cursor: move;
+  }
+
   @include e(content) {
     display: flex;
     flex-grow: 1;
@@ -226,9 +231,18 @@ $control-kanban: (
   @include when(selected) {
     background-color: getCssVar(control-kanban, selected-bg-color);
   }
+
   @include when(disabled) {
     cursor: no-drop;
   }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
   @include e(bottom) {
     display: flex;
     align-items: center;
diff --git a/src/control/kanban/kanban.tsx b/src/control/kanban/kanban.tsx
index 0995ad9fd1e2420587281112eee1acffd01a118c..38510ce916618110102b490b990a8df787d7857a 100644
--- a/src/control/kanban/kanban.tsx
+++ b/src/control/kanban/kanban.tsx
@@ -361,9 +361,28 @@ export const KanbanControl = defineComponent({
             onDbRowClick(item, event)
           }
         >
-          {panel
-            ? renderPanelItemLayout(item, panel)
-            : renderDefaultItem(item, group)}
+          <div class={ns.be('item', 'content')}>
+            {c.state.draggable && !c.state.readonly && (
+              <svg
+                viewBox='0 0 16 16'
+                xmlns='http://www.w3.org/2000/svg'
+                height='1em'
+                width='1em'
+                class={ns.e('drag-icon')}
+                preserveAspectRatio='xMidYMid meet'
+                focusable='false'
+              >
+                <g stroke-width='1' fill-rule='evenodd'>
+                  <g transform='translate(5 1)' fill-rule='nonzero'>
+                    <path d='M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'></path>
+                  </g>
+                </g>
+              </svg>
+            )}
+            {panel
+              ? renderPanelItemLayout(item, panel)
+              : renderDefaultItem(item, group)}
+          </div>
         </el-card>
       );
     };
@@ -556,10 +575,11 @@ export const KanbanControl = defineComponent({
               ]}
             >
               <draggable
-                class={ns.be('group', 'draggable')}
-                modelValue={group.children}
-                group={c.model.id}
                 itemKey='srfkey'
+                group={c.model.id}
+                modelValue={group.children}
+                class={ns.be('group', 'draggable')}
+                handle={`.${ns.e('drag-icon')}`}
                 disabled={
                   !c.state.draggable || c.state.updating || c.state.readonly
                 }
diff --git a/src/control/kanban/swimlane-kanban/swimlane-kanban.scss b/src/control/kanban/swimlane-kanban/swimlane-kanban.scss
index 9b17dc399dee633c040255593f4b73607d26529f..ddc5edc75ad8164fb8cd37af3d0011c88b55d3a3 100644
--- a/src/control/kanban/swimlane-kanban/swimlane-kanban.scss
+++ b/src/control/kanban/swimlane-kanban/swimlane-kanban.scss
@@ -29,6 +29,11 @@ $swimlane-kanban: (
     overflow: auto hidden;
   }
 
+  @include e(drag-icon) {
+    margin-right: getCssVar('spacing', 'tight');
+    cursor: move;;
+  }
+
   @include e('header') {
     box-sizing: border-box;
     width: 100%;
@@ -243,6 +248,13 @@ $swimlane-kanban: (
     @include when('selected') {
       background-color: getCssVar(color, fill, 0);
     }
+
+    @include m(content) {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
   }
 
   @include e('default-item') {
diff --git a/src/control/kanban/swimlane-kanban/swimlane-kanban.tsx b/src/control/kanban/swimlane-kanban/swimlane-kanban.tsx
index ecc9b324ff4891de8473d4ac6476b6ee6f6bef28..94fab3680a817b4b7df0be07e400850d1890f9fb 100644
--- a/src/control/kanban/swimlane-kanban/swimlane-kanban.tsx
+++ b/src/control/kanban/swimlane-kanban/swimlane-kanban.tsx
@@ -602,6 +602,7 @@ export const SwimlaneKanban = defineComponent({
                     itemKey='srfkey'
                     disabled={disabled.value}
                     modelValue={group.children}
+                    handle={`.${ns.e('drag-icon')}`}
                     class={ns.em('cell', 'draggable')}
                     group={getGroupKey(group.key, lane.key)}
                     onChange={(evt: IData) =>
@@ -629,9 +630,33 @@ export const SwimlaneKanban = defineComponent({
                             onClick={() => c.onRowClick(element)}
                             onDblclick={() => c.onDbRowClick(element)}
                           >
-                            {c.model.itemLayoutPanel
-                              ? renderPanelItemLayout(lane, element)
-                              : renderDefaultItem(lane, element, group)}
+                            <div class={ns.em('card', 'content')}>
+                              {c.state.draggable &&
+                                !c.state.readonly &&
+                                c.draggableMode !== 0 && (
+                                  <svg
+                                    viewBox='0 0 16 16'
+                                    xmlns='http://www.w3.org/2000/svg'
+                                    height='1em'
+                                    width='1em'
+                                    class={ns.e('drag-icon')}
+                                    preserveAspectRatio='xMidYMid meet'
+                                    focusable='false'
+                                  >
+                                    <g stroke-width='1' fill-rule='evenodd'>
+                                      <g
+                                        transform='translate(5 1)'
+                                        fill-rule='nonzero'
+                                      >
+                                        <path d='M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'></path>
+                                      </g>
+                                    </g>
+                                  </svg>
+                                )}
+                              {c.model.itemLayoutPanel
+                                ? renderPanelItemLayout(lane, element)
+                                : renderDefaultItem(lane, element, group)}
+                            </div>
                           </el-card>
                         );
                       },
diff --git a/src/control/list/list.scss b/src/control/list/list.scss
index f150cd44c7229f798f3377e94289e4dc8aa0b3fe..0f49e579d7a25ccadfe095d8571afd111fd07892 100644
--- a/src/control/list/list.scss
+++ b/src/control/list/list.scss
@@ -50,8 +50,8 @@ $control-list-group-style2: (
     display: flex;
     align-items: center;
     justify-content: center;
-    color: getCssVar(color, text, 3);
     margin-top: getCssVar(spacing, tight);
+    color: getCssVar(color, text, 3);
     border: 2px dashed getCssVar(color, border);
   }
 }
@@ -63,6 +63,10 @@ $control-list-group-style2: (
   position: relative;
   height: 100%;
 
+  @include e(drag-icon) {
+    cursor: move;
+  }
+  
   @include e(nav-icon) {
     position: absolute;
     top: 18px;
diff --git a/src/control/list/list.tsx b/src/control/list/list.tsx
index ce0c5e57250ed9150a9e72f80bbfbabbfd4683c0..2919c2e68c19880e98710b2313bd42b3dd9317c3 100644
--- a/src/control/list/list.tsx
+++ b/src/control/list/list.tsx
@@ -360,6 +360,23 @@ export const ListControl = defineComponent({
           style={cardStyle}
           class={[ns.b('scroll-item'), ns.is('active', isSelected(item))]}
         >
+          {c.state.draggable && !c.state.readonly && (
+            <svg
+              viewBox='0 0 16 16'
+              xmlns='http://www.w3.org/2000/svg'
+              height='1em'
+              width='1em'
+              class={ns.e('drag-icon')}
+              preserveAspectRatio='xMidYMid meet'
+              focusable='false'
+            >
+              <g stroke-width='1' fill-rule='evenodd'>
+                <g transform='translate(5 1)' fill-rule='nonzero'>
+                  <path d='M1 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM1 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'></path>
+                </g>
+              </g>
+            </svg>
+          )}
           {c.model.controlStyle === 'EXTVIEW2' && !c.state.singleSelect && (
             <el-checkbox
               size='large'
@@ -400,6 +417,7 @@ export const ListControl = defineComponent({
           itemKey='srfkey'
           modelValue={items}
           group={c.model.id}
+          handle={`.${ns.e('drag-icon')}`}
           class={[ns.e('layout-flex'), ns.em('layout-flex', 'draggable')]}
           disabled={disabled || c.state.updating || c.state.readonly}
           onChange={(evt: IData) => onDraggableChange(evt, group?.key)}