From 5a3651adb71ed4192b6b6a77ce862c7ccae6e842 Mon Sep 17 00:00:00 2001
From: zhangxulong <zhangxulong@baidu.com>
Date: Mon, 11 Jul 2022 19:33:07 +0800
Subject: [PATCH] =?UTF-8?q?Cards=20=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99=E4=BF=AE=E5=A4=8D=E3=80=81=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=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

---
 packages/amis/src/renderers/Cards.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/amis/src/renderers/Cards.tsx b/packages/amis/src/renderers/Cards.tsx
index d2720b260..22c73b9b4 100644
--- a/packages/amis/src/renderers/Cards.tsx
+++ b/packages/amis/src/renderers/Cards.tsx
@@ -617,6 +617,7 @@ export default class Cards extends React.Component<GridProps, object> {
 
   destroyDragging() {
     this.sortable && this.sortable.destroy();
+    this.sortable = undefined;
   }
 
   renderActions(region: string) {
@@ -848,7 +849,14 @@ export default class Cards extends React.Component<GridProps, object> {
   }
 
   renderDragToggler() {
-    const {store, multiple, selectable, env, translate: __} = this.props;
+    const {
+      store,
+      multiple,
+      selectable,
+      env,
+      translate: __,
+      dragIcon
+    } = this.props;
 
     if (!store.draggable || store.items.length < 2) {
       return null;
@@ -868,9 +876,14 @@ export default class Cards extends React.Component<GridProps, object> {
           e.preventDefault();
           store.toggleDragging();
           store.dragging && store.clear();
+          store.dragging ? this.initDragging() : undefined;
         }}
       >
-        <Icon icon="exchange" className="icon r90" />
+        {React.isValidElement(dragIcon) ? (
+          dragIcon
+        ) : (
+          <Icon icon="exchange" className="icon r90" />
+        )}
       </Button>
     );
   }
@@ -904,9 +917,11 @@ export default class Cards extends React.Component<GridProps, object> {
       className: cx((card && card.className) || '', {
         'is-checked': item.checked,
         'is-modified': item.modified,
-        'is-moved': item.moved
+        'is-moved': item.moved,
+        'drag-mode': store.dragging
       }),
       item,
+      key: index,
       itemIndex: item.index,
       multiple,
       selectable: store.selectable,