fix(Tabs): only show draggable state when dragging to draggable item (#5990)

* fix(Tabs): show prohibited state when dragging to non-draggable area

chore(useDragSort): optimize code logic
chore(Tabs): add a comment to explain the purpose of onDragSort

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <[email protected]>

Author: RSS1102

packages/components/tabs/tab-nav.tsx

@@ -37,6 +37,7 @@ export default defineComponent({
     onAdd: tabProps.onAdd,
     onRemove: tabProps.onRemove,
     dragSort: tabProps.dragSort,
+    // 在 useDragSort 里会被调用
     onDragSort: tabProps.onDragSort,
   },
   setup(props) {

packages/shared/hooks/useDragSort/index.ts

@@ -1,25 +1,25 @@
 import { onUnmounted } from 'vue';
 
-const traversalTabNavs = (tabNavs: HTMLCollection, fn: { (itemNode: any): void; (tabNav: HTMLDivElement): void }) => {
-  for (const itemNode of tabNavs) {
-    if (itemNode.getAttribute('draggable')) {
-      fn(itemNode);
-    }
-  }
+const traversalTabNavs = (tabNavs: HTMLCollection, fn: (tabNav: HTMLDivElement) => void) => {
+  Array.from(tabNavs)
+    .filter((node): node is HTMLDivElement => node instanceof HTMLDivElement && !!node.getAttribute('draggable'))
+    .forEach(fn);
 };
 
-const handleTarget = (target: EventTarget, tabNavs: HTMLCollection): any => {
-  let resultTarget;
+const handleTarget = (target: EventTarget, tabNavs: HTMLCollection): HTMLDivElement | undefined => {
+  let resultTarget: HTMLDivElement | undefined;
+
   traversalTabNavs(tabNavs, (itemNode) => {
-    if (itemNode.contains(target)) {
+    if (target instanceof Node && itemNode.contains(target)) {
       resultTarget = itemNode;
     }
   });
+
   return resultTarget;
 };
 
 export function useDragSort(props: any) {
-  let navsWrap: HTMLDivElement = null;
+  let navsWrap: HTMLDivElement | null = null;
 
   // 获取当前正在拖动的tabNav节点
   let dragged: HTMLDivElement;
@@ -32,22 +32,47 @@ export function useDragSort(props: any) {
     dragged = target;
     // 使其半透明
     target.style.opacity = '0.5';
+
+    // 指定允许的拖拽操作为 move，且兼容 Firefox（需要 setData）
+    const dt = event.dataTransfer;
+    if (dt) {
+      dt.effectAllowed = 'copy';
+      try {
+        dt.setData('text/plain', '');
+      } catch (e) {
+        // 某些环境下可能抛错，忽略
+      }
+    }
   };
+
   const dragend = (event: DragEvent) => {
     // 重置透明度
     (event.target as HTMLDivElement).style.opacity = '';
   };
   /* 放置目标元素时触发事件 */
   const dragover = (event: DragEvent) => {
-    // 阻止默认动作以启用drop
-    event.preventDefault();
+    if (!navsWrap) return;
+    const target = handleTarget(event.target, navsWrap.children);
+    const dt = event.dataTransfer;
+    if (dt) {
+      // 不可放置目标显示禁止状态
+      dt.dropEffect = target?.draggable ? 'copy' : 'none';
+    }
+    if (target?.draggable) {
+      // 阻止默认动作以启用drop
+      event.preventDefault();
+    }
   };
   // 当可拖动的元素进入可放置的目标时
   const dragenter = (event: DragEvent) => {
     // 高亮目标节点
     const target = handleTarget(event.target, navsWrap.children);
     if (target && target !== dragged && target.draggable) {
-      target.firstChild.style.outline = '1px dashed #0052d9';
+      const { firstChild } = target;
+      if (firstChild instanceof HTMLElement) {
+        const newStyle = { outline: '1px dashed #0052d9' };
+        Object.assign(firstChild.style, newStyle);
+      }
       // 进入的节点全部记录下来
       if (!enterTargets.includes(target)) {
         enterTargets.push(target);
@@ -72,8 +97,12 @@ export function useDragSort(props: any) {
     event.preventDefault();
 
     traversalTabNavs(navsWrap.children, (tabNav) => {
-      tabNav.firstChild.style.outline = 'none';
+      const firstChild = tabNav.firstChild as HTMLElement;
+      if (firstChild) {
+        firstChild.style.outline = 'none';
+      }
     });
+
     // 将拖动的元素到所选择的放置目标节点中
     let target = handleTarget(event.target, navsWrap.children);
     if (target && target.parentNode !== dragged && target.draggable) {
@@ -82,7 +111,7 @@ export function useDragSort(props: any) {
       // 获取放入元素index
       const targetIndex = [].indexOf.call(navsWrap.children, target);
       if (targetIndex > dragIndex) {
-        target = navsWrap.children[targetIndex + 1];
+        target = navsWrap.children[targetIndex + 1] as HTMLDivElement | null;
       }
 
       // 当props.theme === "normal" 会多出一个指示条为第一个dom节点，所以需要减1

packages/tdesign-vue-next/.changelog/pr-5990.md

@@ -0,0 +1,6 @@
+---
+pr_number: 5990
+contributor: RSS1102
+---
+
+- feat(Tabs): 拖拽至 `draggable =false` 区域时不显示可放置状态？ @RSS1102 ([#5990](https://github.com/Tencent/tdesign-vue-next/pull/5990))