From 3dd0d00288ce3bf8ad1c7652fecc6019938480d3 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 4 Jul 2025 12:39:41 +0800
Subject: [PATCH] fix: menu and post category dragging issue (#7608)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.21.x

#### What this PR does / why we need it:

Fix issue where menu items and post categories could not be reordered via drag-and-drop

#### Which issue(s) this PR fixes:

Fixes #7607

#### Does this PR introduce a user-facing change?

```release-note
修复菜单项和文章分类可能出现无法拖动排序的问题
```
---
 .../modules/contents/posts/categories/CategoryList.vue     | 5 +----
 .../posts/categories/components/CategoryListItem.vue       | 5 -----
 ui/console-src/modules/interface/menus/Menus.vue           | 7 +------
 3 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/ui/console-src/modules/contents/posts/categories/CategoryList.vue b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
index 4ae231b63..c32c283d1 100644
--- a/ui/console-src/modules/contents/posts/categories/CategoryList.vue
+++ b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
@@ -24,7 +24,6 @@ const { categories, categoriesTree, isLoading, handleFetchCategories } =
   usePostCategory();
 
 const batchUpdating = ref(false);
-const isDragging = ref(false);
 
 async function handleUpdateInBatch() {
   const categoriesTreeToUpdate = resetCategoriesTreePriority(
@@ -56,7 +55,6 @@ async function handleUpdateInBatch() {
   } finally {
     await handleFetchCategories();
     batchUpdating.value = false;
-    isDragging.value = false;
   }
 }
 </script>
@@ -130,16 +128,15 @@ async function handleUpdateInBatch() {
           :class="{
             'cursor-progress opacity-60': batchUpdating,
           }"
+          :disable-drag="batchUpdating"
           trigger-class="drag-element"
           :indent="40"
           @after-drop="handleUpdateInBatch"
-          @before-drag-start="isDragging = true"
         >
           <template #default="{ node, stat }">
             <CategoryListItem
               :category-tree-node="node"
               :is-child-level="stat.level > 1"
-              :is-dragging="isDragging"
             />
           </template>
         </Draggable>
diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
index 03d053fb5..d282c171c 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -27,12 +27,10 @@ const queryClient = useQueryClient();
 const props = withDefaults(
   defineProps<{
     isChildLevel?: boolean;
-    isDragging?: boolean;
     categoryTreeNode: CategoryTreeNode;
   }>(),
   {
     isChildLevel: false,
-    isDragging: false,
   }
 );
 
@@ -92,9 +90,6 @@ const handleOpenCreateByParentModal = () => {
       <div
         v-permission="['system:posts:manage']"
         class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
-        :class="{
-          '!hidden': isDragging,
-        }"
       >
         <IconList class="h-3.5 w-3.5" />
       </div>
diff --git a/ui/console-src/modules/interface/menus/Menus.vue b/ui/console-src/modules/interface/menus/Menus.vue
index f95173717..ec5cf2a49 100644
--- a/ui/console-src/modules/interface/menus/Menus.vue
+++ b/ui/console-src/modules/interface/menus/Menus.vue
@@ -45,7 +45,6 @@ const selectedMenu = ref<Menu>();
 const selectedMenuItem = ref<MenuItem>();
 const selectedParentMenuItem = ref<MenuItem>();
 const menuItemEditingModal = ref();
-const isDragging = ref(false);
 
 const {
   data: menuItems,
@@ -162,7 +161,6 @@ async function handleUpdateInBatch() {
     await queryClient.invalidateQueries({ queryKey: ["menus"] });
     await refetch();
     batchUpdating.value = false;
-    isDragging.value = false;
   }
 }
 
@@ -312,10 +310,10 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
               :class="{
                 'cursor-progress opacity-60': batchUpdating,
               }"
+              :disable-drag="batchUpdating"
               trigger-class="drag-element"
               :indent="40"
               @after-drop="handleUpdateInBatch"
-              @before-drag-start="isDragging = true"
             >
               <template #default="{ node }">
                 <div
@@ -325,9 +323,6 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
                     <div
                       v-permission="['system:menus:manage']"
                       class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
-                      :class="{
-                        '!hidden': isDragging,
-                      }"
                     >
                       <IconList class="h-3.5 w-3.5" />
                     </div>