如何使 DOM 元素在 SAPUI5 应用程序上可拖动？答案

【问题标题】：How to make DOM element draggable on SAPUI5 app?如何使 DOM 元素在 SAPUI5 应用程序上可拖动？
【发布时间】：2020-12-22 04:41:21
【问题描述】：

我正在通过网络聊天在我的 SAPUI5 应用程序上使用 Sap 对话式 AI。我在我的应用程序 Component.js 上添加了 Webchat 脚本。它工作正常，但聊天图标覆盖了应用的页脚，我无法使其可拖动。

这是component.js代码；

    if ( !document.getElementById("chat-bot" )) {
            var s = document.createElement("script");
            s.setAttribute("id", "chat-bot");
            s.setAttribute("src", "https://cdn.cai.tools.sap/webchat/webchat.js");
            document.getElementsByTagName('head')[0].appendChild(s);
        }
        s.setAttribute("channelId", "XXXXX-XXXX-XXXX-XXXXX-XXXXXXX");
        s.setAttribute("token", "XXXXXXXXXXXXXXXXXXXXXXXX");

它的外观如下：

任何人都知道我怎样才能使它可拖动或将图标也放在页脚上？

【问题讨论】：

标签： javascript dom sapui5 web-chat sap-conversational-ai

【解决方案1】：

目前我认为这是不可能的。聊天机器人按钮包含在下面附加的 CSS 中。显然，覆盖这个样式类，您可以移动按钮，但不建议这样做。

对于您的用例，您可以尝试将“sapUiLargeMarginEnd”类赋予最后一个页脚按钮，以将页脚按钮向左移动。

通过检查按钮，我们可以看到以下属性。如果 SAP 将其提供为按钮集成，那么我们可以轻松地进行放置。

【讨论】：