SAP UI5中能否实现带链接的拖拽功能？

当然可以！你目前的代码只是完成了基础的元素拖拽能力，但缺少拖拽过程中动态绘制链接以及放置后保存并固化链接关系的核心逻辑。下面我会一步步带你实现这个需求：

核心实现思路 #

我们需要结合「拖拽事件监听」+「SVG动态绘图」来达成目标：

1. 拖拽启动时记录起始元素位置，创建临时虚线链接跟随鼠标移动
2. 拖拽结束时判断是否落在目标元素上，若成功则转为永久实线链接
3. 用UI5模型管理所有链接关系，方便后续维护、重绘或持久化

具体实现步骤 #

1. 初始化全局SVG绘图容器 #

首先在控制器的onInit方法中创建一个顶层SVG容器，专门用来绘制拖拽链接，避免干扰其他UI控件的交互：

onInit: function() {
  // 创建覆盖整个页面的SVG容器
  this.oLinkSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  this.oLinkSVG.style.position = "absolute";
  this.oLinkSVG.style.top = "0";
  this.oLinkSVG.style.left = "0";
  this.oLinkSVG.style.width = "100%";
  this.oLinkSVG.style.height = "100%";
  this.oLinkSVG.style.pointerEvents = "none"; // 不拦截鼠标事件，避免影响其他控件
  document.body.appendChild(this.oLinkSVG);

  // 存储拖拽过程中的临时状态
  this.dragStartPos = null;
  this.tempLink = null;
}

2. 改造可拖拽控件的Delegate #

更新你的DraggableDelegate，添加拖拽全周期的事件监听，实现临时链接的动态绘制：

UI5Object.extend("DraggableDelegate", {
  constructor: function(oControl) {
    this.oControl = oControl;
    this.parentController = oControl.getParent(); // 获取父控制器的SVG引用
  },
  onAfterRendering: function() {
    const that = this;
    this.oControl.$().draggable({
      cancel: false,
      start: function(event, ui) {
        // 记录起始元素的中心坐标
        const domRef = that.oControl.getDomRef();
        const rect = domRef.getBoundingClientRect();
        that.parentController.dragStartPos = {
          x: rect.left + rect.width / 2,
          y: rect.top + rect.height / 2
        };

        // 创建临时虚线链接
        that.parentController.tempLink = document.createElementNS("http://www.w3.org/2000/svg", "line");
        that.parentController.tempLink.setAttribute("stroke", "#007bff");
        that.parentController.tempLink.setAttribute("stroke-width", "2");
        that.parentController.tempLink.setAttribute("stroke-dasharray", "5,5");
        that.parentController.oLinkSVG.appendChild(that.parentController.tempLink);

        // 监听鼠标移动，实时更新链接位置
        document.addEventListener("mousemove", that.updateTempLink.bind(that));
      },
      stop: function() {
        // 拖拽结束后清理临时链接和事件监听
        if (that.parentController.tempLink) {
          that.parentController.oLinkSVG.removeChild(that.parentController.tempLink);
          that.parentController.tempLink = null;
        }
        document.removeEventListener("mousemove", that.updateTempLink.bind(that));
        that.parentController.dragStartPos = null;
      }
    });
  },
  updateTempLink: function(event) {
    // 实时更新临时链接的终点坐标
    if (this.parentController.dragStartPos && this.parentController.tempLink) {
      this.parentController.tempLink.setAttribute("x1", this.parentController.dragStartPos.x);
      this.parentController.tempLink.setAttribute("y1", this.parentController.dragStartPos.y);
      this.parentController.tempLink.setAttribute("x2", event.clientX);
      this.parentController.tempLink.setAttribute("y2", event.clientY);
    }
  }
});

3. 添加可放置控件的Delegate #

创建DroppableDelegate来处理拖拽放置逻辑，完成永久链接的绘制和关系存储：

UI5Object.extend("DroppableDelegate", {
  constructor: function(oControl) {
    this.oControl = oControl;
    this.parentController = oControl.getParent();
  },
  onAfterRendering: function() {
    const that = this;
    this.oControl.$().droppable({
      drop: function(event, ui) {
        // 获取源控件与目标控件（需确保DOM元素绑定了UI5控件引用）
        const sourceControl = ui.draggable[0].control;
        const targetControl = that.oControl;

        // 将链接关系存储到UI5模型（需提前在模型中初始化links数组）
        const linkData = {
          sourceId: sourceControl.getId(),
          targetId: targetControl.getId()
        };
        const links = that.parentController.getModel().getProperty("/links");
        links.push(linkData);
        that.parentController.getModel().setProperty("/links", links);

        // 绘制永久实线链接
        that.drawPermanentLink(sourceControl, targetControl);
      }
    });
  },
  drawPermanentLink: function(source, target) {
    // 计算两个元素的中心坐标
    const sourceRect = source.getDomRef().getBoundingClientRect();
    const targetRect = target.getDomRef().getBoundingClientRect();
    const sourceCenter = {
      x: sourceRect.left + sourceRect.width / 2,
      y: sourceRect.top + sourceRect.height / 2
    };
    const targetCenter = {
      x: targetRect.left + targetRect.width / 2,
      y: targetRect.top + targetRect.height / 2
    };

    // 创建永久链接元素
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("stroke", "#28a745");
    line.setAttribute("stroke-width", "2");
    line.setAttribute("x1", sourceCenter.x);
    line.setAttribute("y1", sourceCenter.y);
    line.setAttribute("x2", targetCenter.x);
    line.setAttribute("y2", targetCenter.y);
    this.parentController.oLinkSVG.appendChild(line);
  }
});

额外注意事项 #

• 务必在控件的onAfterRendering方法中绑定拖拽/放置事件，此时DOM元素已完成渲染，能确保事件绑定有效
• 若偏好使用SAP UI5原生拖拽API（sap.ui.core.dnd），可以替换jQuery UI的draggable/droppable，通过监听dragStart、drag、drop事件实现相同逻辑，更贴合UI5生态
• 若页面存在滚动或控件位置变化，需监听scroll或控件resize事件，重新计算并更新链接坐标

内容的提问来源于stack exchange，提问作者Noobie