From 4e5c26d0d1ab130a2603c41df537ef5867496297 Mon Sep 17 00:00:00 2001
From: ShineKOT <1917095344@qq.com>
Date: Mon, 4 Aug 2025 13:59:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=EF=BC=8C=E5=88=97=E8=A1=A8=EF=BC=8C=E7=9C=8B=E6=9D=BF=E9=A1=B9?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 src/control/data-view/data-view.scss          |  4 +++
 src/control/data-view/data-view.tsx           | 18 +++++++++++
 src/control/kanban/kanban.scss                | 14 ++++++++
 src/control/kanban/kanban.tsx                 | 32 +++++++++++++++----
 .../swimlane-kanban/swimlane-kanban.scss      | 12 +++++++
 .../swimlane-kanban/swimlane-kanban.tsx       | 31 ++++++++++++++++--
 src/control/list/list.scss                    |  6 +++-
 src/control/list/list.tsx                     | 18 +++++++++++
 9 files changed, 126 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbfd405bb..7ae6e686f 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 409d19a32..6d01d45bd 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 f31e59e7d..351f31a45 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 5c372a2ef..c3d2acab4 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 0995ad9fd..38510ce91 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 9b17dc399..ddc5edc75 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 ecc9b324f..94fab3680 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 f150cd44c..0f49e579d 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 ce0c5e572..2919c2e68 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)}
-- 
Gitee