newDragSource() 在黄金布局 2.6.0 中不起作用

Question

我们正在一个巨大的 Angular 16 生产应用程序中（缓慢且极其痛苦地）从黄金布局 1.5.9 迁移到黄金布局 2.6.0。

在我们的应用程序中，我们有一个下拉菜单，其中包含可以添加到页面的所有可用小部件的名称。在初始化期间，菜单中的所有 HTML 元素都使用

newDragSource

对象的

GoldenLayout

方法添加为拖动源。

在黄金布局 1.5.9 中，这工作得很好，菜单中的项目可以拖到页面上，并且它们将作为具有所有预期功能的黄金布局组件添加。此外，通过单击选择此菜单中的项目也会将组件添加到页面。

在 2.6.0 版本中，这根本不起作用。菜单项甚至不可拖动。单击菜单中的项目仍然有效，并将所选组件添加到布局中，并且它具有所有预期的功能。

我用来创建拖动源的代码如下：

public createNewWidgetDragSource(element: HTMLElement, widgetModel: Widget): void {
  const gl = this.getGoldenLayoutInstance();
  const config = () => {
    const item: DragSource.ComponentItemConfig = {
      state: null,
      title: widgetModel.name,
      type: 'widget-golden-instance',
    };
    return item;
  };

  gl.newDragSource(element, config);
}

请注意，这与 golden-layout-ng-app 参考应用程序中使用的代码几乎相同。在参考应用程序中，代码按预期工作。参考应用程序使用的是golden-layout 2.5.0。

请注意，组件类型

widget-golden-instance

是一个通用的黄金布局容器组件，它充当许多我们自己的小部件的主机。

如果我检查上面代码中的

gl

对象，我可以看到对象内的

_dragSources

数组is 填充了菜单中的 LI 元素。

编辑器或浏览器中没有错误（只是

ComponentItemConfig

命名空间下的

DragSource

的弃用警告 - 我在没有这个的情况下尝试过，行为是相同的）。

它根本不起作用。

我错过了什么吗？这是一个错误吗？

编辑

我觉得这在某种程度上与我想要制作拖拽源的列表项位于菜单中这一事实有关。如果我只是将一个元素硬编码到页面，然后使 that 元素可拖动（具有相同的

createNewWidgetDragSource

功能），那么它会按预期工作。

但是，我尝试过不将菜单中的元素初始化为dragSources，直到菜单实际打开并且列表项可见，但仍然不起作用。

如果我调用

createNewWidgetDragSource

方法并且不向其传递 HTML 元素，那么我会看到来自 gold-layout 源的错误，并且我已经验证该方法正在从菜单传递列表项元素.

我尝试更新参考应用程序以使用golden-layout 2.6.0而不是2.5.0，并且拖动仍然可以在那里工作。

一切看起来都正确，我在正确的时间拥有正确的元素，没有错误。它只是拒绝工作。

Answer 1

终于明白了。

即使我将菜单中的列表项设为dragSource 项，mouseDown 事件处理程序（在创建每个dragSource 时由golden-layout 添加）是在列表项内的标签元素而不是列表项本身上触发的， Golden-layout 内部有一些逻辑，用于检查 mouseDown 事件目标是否与 DragSource 元素相同。显然这不一样，所以逻辑失败了。

将列表项内的标签改为 DragSources 解决了问题