@tmagic/stage 1.5.0-beta.8 → 1.5.0-beta.9

package/dist/tmagic-stage.js

@@ -1,5 +1,5 @@
 import EventEmitter, { EventEmitter as EventEmitter$1 } from 'events';
-import { removeClassName, guid, setIdToEl, getIdFromEl, getElById, calcValueByFontsize, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
+import { removeClassName, getIdFromEl, guid, setIdToEl, getElById, calcValueByFontsize, addClassName, removeClassNameByClassName, getDocument, createDiv, injectStyle, isSameDomain, getHost } from '@tmagic/utils';
 import KeyController from 'keycon';
 import { merge, throttle } from 'lodash-es';
 import { Env } from '@tmagic/core';
@@ -179,7 +179,7 @@ const down = (deltaTop, target) => {
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+    (child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
   );
   const index = brothers.indexOf(target);
   const downEls = brothers.slice(index + 1);
@@ -195,14 +195,15 @@ const down = (deltaTop, target) => {
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+  const src = getIdFromEl()(target) || "";
   return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+    src,
+    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || "" : src
   };
 };
 const up = (deltaTop, target) => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+    (child) => !getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
   );
   const index = brothers.indexOf(target);
   const upEls = brothers.slice(0, index);
@@ -217,9 +218,10 @@ const up = (deltaTop, target) => {
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+  const src = getIdFromEl()(target) || "";
   return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+    src,
+    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || "" : src
   };
 };
 const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
@@ -329,7 +331,6 @@ class TargetShadow {
   };
 }
 
-const getId = getIdFromEl();
 class DragResizeHelper {
   /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
   targetShadow;
@@ -489,14 +490,16 @@ class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
+      );
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -516,14 +519,16 @@ class DragResizeHelper {
     const { events } = e;
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
+        (frameItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id)
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
+        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(targetItem) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem))
       );
       if (!targeEl) return;
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement)
+      );
       if (!isParentIncluded) {
         const { marginLeft, marginTop } = getMarginValue(targeEl);
         targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -542,7 +547,7 @@ class DragResizeHelper {
     let shadowEl = this.getShadowEl();
     const shadowEls = this.getShadowEls();
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
+      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ""));
     }
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
       const targetShadowHtmlEl = shadowEl;
@@ -563,10 +568,10 @@ class DragResizeHelper {
     if (this.framesSnapShot.length > 0) return;
     events.forEach((ev) => {
       const matchEventTarget = this.targetList.find(
-        (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
+        (targetItem) => getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || "")
       );
       if (!matchEventTarget) return;
-      const id = getId(matchEventTarget);
+      const id = getIdFromEl()(matchEventTarget);
       id && this.framesSnapShot.push({
         left: matchEventTarget.offsetLeft,
         top: matchEventTarget.offsetTop,
@@ -581,24 +586,27 @@ class DragResizeHelper {
     if (this.ghostEl) {
       this.destroyGhostEl();
     }
-    const ghostEl = el.cloneNode(true);
-    this.setGhostElChildrenId(ghostEl);
+    const ghostEl = document.createElement("div");
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = ".5";
-    ghostEl.style.position = "absolute";
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    ghostEl.style.marginLeft = "0";
-    ghostEl.style.marginTop = "0";
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+    ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
     el.after(ghostEl);
     return ghostEl;
   }
   setGhostElChildrenId(el) {
     for (const child of Array.from(el.children)) {
       const el2 = child;
-      const id = getId(el2);
+      const id = getIdFromEl()(el2);
       if (id) {
         setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
       }

package/dist/tmagic-stage.umd.cjs

@@ -175,7 +175,7 @@
     let swapIndex = 0;
     let addUpH = target.clientHeight;
     const brothers = Array.from(target.parentNode?.children || []).filter(
-      (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+      (child) => !utils.getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
     );
     const index = brothers.indexOf(target);
     const downEls = brothers.slice(index + 1);
@@ -191,14 +191,15 @@
       addUpH += ele.clientHeight / 2;
       swapIndex = i;
     }
+    const src = utils.getIdFromEl()(target) || "";
     return {
-      src: target.id,
-      dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id
+      src,
+      dist: downEls.length && swapIndex > -1 ? utils.getIdFromEl()(downEls[swapIndex]) || "" : src
     };
   };
   const up = (deltaTop, target) => {
     const brothers = Array.from(target.parentNode?.children || []).filter(
-      (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX)
+      (child) => !utils.getIdFromEl()(child)?.startsWith(GHOST_EL_ID_PREFIX)
     );
     const index = brothers.indexOf(target);
     const upEls = brothers.slice(0, index);
@@ -213,9 +214,10 @@
       addUpH += ele.clientHeight / 2;
       swapIndex = i;
     }
+    const src = utils.getIdFromEl()(target) || "";
     return {
-      src: target.id,
-      dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id
+      src,
+      dist: upEls.length && swapIndex > -1 ? utils.getIdFromEl()(upEls[swapIndex]) || "" : src
     };
   };
   const isMoveableButton = (target) => target.classList.contains("moveable-button") || target.parentElement?.classList.contains("moveable-button");
@@ -325,7 +327,6 @@
     };
   }
 
-  const getId = utils.getIdFromEl();
   class DragResizeHelper {
     /** 目标节点在蒙层上的占位节点，用于跟鼠标交互，避免鼠标事件直接作用到目标节点 */
     targetShadow;
@@ -485,14 +486,16 @@
       events.forEach((ev) => {
         const { width, height, beforeTranslate } = ev.drag;
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+          (frameItem) => frameItem.id === utils.getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
         );
         if (!frameSnapShot) return;
         const targeEl = this.targetList.find(
-          (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, "")
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+        const isParentIncluded = this.targetList.find(
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(targeEl.parentElement)
+        );
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + beforeTranslate[0] - marginLeft}px`;
@@ -512,14 +515,16 @@
       const { events } = e;
       events.forEach((ev) => {
         const frameSnapShot = this.framesSnapShot.find(
-          (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id)
+          (frameItem) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(ev.target)?.endsWith(frameItem.id)
         );
         if (!frameSnapShot) return;
         const targeEl = this.targetList.find(
-          (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(targetItem) && getId(ev.target)?.endsWith(getId(targetItem))
+          (targetItem) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(targetItem) && utils.getIdFromEl()(ev.target)?.endsWith(utils.getIdFromEl()(targetItem))
         );
         if (!targeEl) return;
-        const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+        const isParentIncluded = this.targetList.find(
+          (targetItem) => utils.getIdFromEl()(targetItem) === utils.getIdFromEl()(targeEl.parentElement)
+        );
         if (!isParentIncluded) {
           const { marginLeft, marginTop } = getMarginValue(targeEl);
           targeEl.style.left = `${frameSnapShot.left + ev.beforeTranslate[0] - marginLeft}px`;
@@ -538,7 +543,7 @@
       let shadowEl = this.getShadowEl();
       const shadowEls = this.getShadowEls();
       if (shadowEls.length) {
-        shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ""));
+        shadowEl = shadowEls.find((item) => utils.getIdFromEl()(item)?.endsWith(utils.getIdFromEl()(el) || ""));
       }
       if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
         const targetShadowHtmlEl = shadowEl;
@@ -559,10 +564,10 @@
       if (this.framesSnapShot.length > 0) return;
       events.forEach((ev) => {
         const matchEventTarget = this.targetList.find(
-          (targetItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || "")
+          (targetItem) => utils.getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && utils.getIdFromEl()(ev.target)?.endsWith(utils.getIdFromEl()(targetItem) || "")
         );
         if (!matchEventTarget) return;
-        const id = getId(matchEventTarget);
+        const id = utils.getIdFromEl()(matchEventTarget);
         id && this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
           top: matchEventTarget.offsetTop,
@@ -577,24 +582,27 @@
       if (this.ghostEl) {
         this.destroyGhostEl();
       }
-      const ghostEl = el.cloneNode(true);
-      this.setGhostElChildrenId(ghostEl);
+      const ghostEl = document.createElement("div");
       const { top, left } = getAbsolutePosition(el, getOffset(el));
-      utils.setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-      ghostEl.style.zIndex = ZIndex.GHOST_EL;
-      ghostEl.style.opacity = ".5";
-      ghostEl.style.position = "absolute";
-      ghostEl.style.left = `${left}px`;
-      ghostEl.style.top = `${top}px`;
-      ghostEl.style.marginLeft = "0";
-      ghostEl.style.marginTop = "0";
+      utils.setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${utils.getIdFromEl()(el)}`);
+      ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
       el.after(ghostEl);
       return ghostEl;
     }
     setGhostElChildrenId(el) {
       for (const child of Array.from(el.children)) {
         const el2 = child;
-        const id = getId(el2);
+        const id = utils.getIdFromEl()(el2);
         if (id) {
           utils.setIdToEl()(el2, `${GHOST_EL_ID_PREFIX}${id}`);
         }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.8",
+  "version": "1.5.0-beta.9",
   "name": "@tmagic/stage",
   "type": "module",
   "main": "dist/tmagic-stage.umd.cjs",
@@ -45,9 +45,9 @@
   },
   "peerDependencies": {
     "typescript": "*",
-    "@tmagic/schema": "1.5.0-beta.8",
-    "@tmagic/core": "1.5.0-beta.8",
-    "@tmagic/utils": "1.5.0-beta.8"
+    "@tmagic/schema": "1.5.0-beta.9",
+    "@tmagic/core": "1.5.0-beta.9",
+    "@tmagic/utils": "1.5.0-beta.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/DragResizeHelper.ts

@@ -39,8 +39,6 @@ import TargetShadow from './TargetShadow';
 import type { DragResizeHelperConfig, Rect, TargetElement } from './types';
 import { getAbsolutePosition, getBorderWidth, getMarginValue, getOffset } from './util';
 
-const getId = getIdFromEl();
-
 /**
  * 拖拽/改变大小等操作发生时，moveable会抛出各种状态事件，DragResizeHelper负责响应这些事件，对目标节点target和拖拽节点targetShadow进行修改；
  * 其中目标节点是DragResizeHelper直接改的，targetShadow作为直接被操作的拖拽框，是调用moveableHelper改的；
@@ -243,15 +241,17 @@ export default class DragResizeHelper {
     events.forEach((ev) => {
       const { width, height, beforeTranslate } = ev.drag;
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => frameItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
+        (frameItem) => frameItem.id === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
-        (targetItem) => targetItem.id === getId(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(ev.target)?.replace(DRAG_EL_ID_PREFIX, ''),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),
+      );
 
       if (!isParentIncluded) {
         // 更新页面元素位置
@@ -281,18 +281,21 @@ export default class DragResizeHelper {
     // 拖动过程更新
     events.forEach((ev) => {
       const frameSnapShot = this.framesSnapShot.find(
-        (frameItem) => getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(frameItem.id),
+        (frameItem) =>
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getIdFromEl()(ev.target)?.endsWith(frameItem.id),
       );
       if (!frameSnapShot) return;
       const targeEl = this.targetList.find(
         (targetItem) =>
-          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
-          getId(targetItem) &&
-          getId(ev.target)?.endsWith(getId(targetItem)!),
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getIdFromEl()(targetItem) &&
+          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem)!),
       );
       if (!targeEl) return;
       // 元素与其所属组同时加入多选列表时，只更新父元素
-      const isParentIncluded = this.targetList.find((targetItem) => getId(targetItem) === getId(targeEl.parentElement));
+      const isParentIncluded = this.targetList.find(
+        (targetItem) => getIdFromEl()(targetItem) === getIdFromEl()(targeEl.parentElement),
+      );
       if (!isParentIncluded) {
         // 更新页面元素位置
         const { marginLeft, marginTop } = getMarginValue(targeEl);
@@ -319,7 +322,7 @@ export default class DragResizeHelper {
     const shadowEls = this.getShadowEls();
 
     if (shadowEls.length) {
-      shadowEl = shadowEls.find((item) => getId(item)?.endsWith(getId(el) || ''));
+      shadowEl = shadowEls.find((item) => getIdFromEl()(item)?.endsWith(getIdFromEl()(el) || ''));
     }
 
     if (parentEl && this.mode === Mode.ABSOLUTE && shadowEl) {
@@ -356,11 +359,12 @@ export default class DragResizeHelper {
       // 实际目标元素
       const matchEventTarget = this.targetList.find(
         (targetItem) =>
-          getId(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) && getId(ev.target)?.endsWith(getId(targetItem) || ''),
+          getIdFromEl()(ev.target)?.startsWith(DRAG_EL_ID_PREFIX) &&
+          getIdFromEl()(ev.target)?.endsWith(getIdFromEl()(targetItem) || ''),
       );
       if (!matchEventTarget) return;
 
-      const id = getId(matchEventTarget);
+      const id = getIdFromEl()(matchEventTarget);
       id &&
         this.framesSnapShot.push({
           left: matchEventTarget.offsetLeft,
@@ -378,25 +382,31 @@ export default class DragResizeHelper {
       this.destroyGhostEl();
     }
 
-    const ghostEl = el.cloneNode(true) as HTMLElement;
-    this.setGhostElChildrenId(ghostEl);
+    const ghostEl = document.createElement('div') as HTMLElement;
     const { top, left } = getAbsolutePosition(el, getOffset(el));
-    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getId(el)}`);
-    ghostEl.style.zIndex = ZIndex.GHOST_EL;
-    ghostEl.style.opacity = '.5';
-    ghostEl.style.position = 'absolute';
-    ghostEl.style.left = `${left}px`;
-    ghostEl.style.top = `${top}px`;
-    ghostEl.style.marginLeft = '0';
-    ghostEl.style.marginTop = '0';
+
+    setIdToEl()(ghostEl, `${GHOST_EL_ID_PREFIX}${getIdFromEl()(el)}`);
+
+    ghostEl.style.cssText = `
+      z-index: ${ZIndex.GHOST_EL};
+      opacity: .6;
+      position: absolute;
+      left: ${left}px;
+      top: ${top}px;
+      margin: 0;
+      background: blue;
+      width: ${el.clientWidth}px;
+      height: ${el.clientHeight}px;
+    `;
     el.after(ghostEl);
+
     return ghostEl;
   }
 
   private setGhostElChildrenId(el: Element): void {
     for (const child of Array.from(el.children)) {
       const el = child as HTMLElement;
-      const id = getId(el);
+      const id = getIdFromEl()(el);
       if (id) {
         setIdToEl()(el, `${GHOST_EL_ID_PREFIX}${id}`);
       }

package/src/StageDragResize.ts

@@ -22,7 +22,7 @@ import Moveable, { MoveableOptions } from 'moveable';
 import { getIdFromEl } from '@tmagic/utils';
 
 import { Mode, StageDragStatus } from './const';
-import DragResizeHelper from './DragResizeHelper';
+import type DragResizeHelper from './DragResizeHelper';
 import MoveableOptionsManager from './MoveableOptionsManager';
 import type {
   DelayedMarkContainer,

package/src/util.ts

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { removeClassName } from '@tmagic/utils';
+import { getIdFromEl, removeClassName } from '@tmagic/utils';
 
 import { GHOST_EL_ID_PREFIX, Mode, SELECTED_CLASS, ZIndex } from './const';
 import type { Offset, SortEventData, TargetElement } from './types';
@@ -170,7 +170,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
   let swapIndex = 0;
   let addUpH = target.clientHeight;
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+    (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX),
   );
   const index = brothers.indexOf(target);
   // 往下移动
@@ -189,9 +189,12 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
     addUpH += ele.clientHeight / 2;
     swapIndex = i;
   }
+
+  const src = getIdFromEl()(target) || '';
+
   return {
-    src: target.id,
-    dist: downEls.length && swapIndex > -1 ? downEls[swapIndex].id : target.id,
+    src,
+    dist: downEls.length && swapIndex > -1 ? getIdFromEl()(downEls[swapIndex]) || '' : src,
   };
 };
 
@@ -204,7 +207,7 @@ export const down = (deltaTop: number, target: TargetElement): SortEventData =>
  */
 export const up = (deltaTop: number, target: TargetElement): SortEventData => {
   const brothers = Array.from(target.parentNode?.children || []).filter(
-    (node) => !node.id.startsWith(GHOST_EL_ID_PREFIX),
+    (child) => !getIdFromEl()(child as HTMLElement)?.startsWith(GHOST_EL_ID_PREFIX),
   );
   const index = brothers.indexOf(target);
   // 往上移动
@@ -225,9 +228,12 @@ export const up = (deltaTop: number, target: TargetElement): SortEventData => {
 
     swapIndex = i;
   }
+
+  const src = getIdFromEl()(target) || '';
+
   return {
-    src: target.id,
-    dist: upEls.length && swapIndex > -1 ? upEls[swapIndex].id : target.id,
+    src,
+    dist: upEls.length && swapIndex > -1 ? getIdFromEl()(upEls[swapIndex]) || '' : src,
   };
 };