带按钮的角度拖放列表

Question

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

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

请求的按钮是：

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

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

有什么想法吗？

Answer 1

您可以编辑该示例使用的HTML（每个数组有1个root div，可以使用材质图标按钮在其中插入第3个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);
 }

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