带按钮的角度拖放列表

Question

我需要开发一个用于重新排序对象的角度组件（从列表 1“源”拖动到列表 2“目标”），并且我需要该组件具有按钮。

我观察了Angular Material website 中存在的各种 dnd 组件，“拖放连接排序”是我正在寻找的一个很好的基础。我仍然怀念的是我们过去曾经拥有的按钮（我知道，老式的，但这些是强制性要求）。

请求的按钮是：

1. 两个列表之间的按钮，用于将所选项目从列表 1 移动到列表 2，反之亦然，see illustration
2. & 3. 目标列表旁边的“向上”和“向下”按钮，用于向上或向下移动所选项目

我知道这听起来很奇怪，但这是他们的要求，我需要提供。我想我可以从头开始编写这样的组件，但如果有任何东西会更好。

有什么想法吗？

Answer 1

您可以编辑示例使用的 HTML（每个数组有 1 个根 div，您可以使用材料图标按钮在其间插入第三个 div）并使用 transferArrayItem 函数来回传输项目。

一些伪代码。要点是： * 获取对 2 个容器的引用，通过 API 查找正确的对象。 * 使用ViewChild 在您的 TS 文件中访问它。 * 单击项目选择它们并将它们的索引存储在selectedLeft 和selectedRight

 @ViewChild('left-container') leftContainer;
 @ViewChild('right-container') rightContainer;

 public selectedLeft: number;
 public selectedRight: number;

 moveRight() {
  transferArrayItem(this.leftContainer, this.rightContainer, this.selectedLeft, 0);
 }

这应该将所选索引处的项目移动到右侧列表的顶部。