带按钮的角度拖放列表

Question

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

我在Angular Material网站上观察到了各种dnd组件，"拖放连接排序"是我想要的一个很好的基础。我仍然怀念的是我们过去常有的按钮(我知道，老式，但这些是强制性要求(。

请求的按钮有：

两个列表之间的

1. 按钮，将所选项目从列表1移动到列表2，反之亦然，请参见插图
2. &3.目标列表旁边的"向上"one_answers"向下"按钮，用于向上或向下移动所选项目

我知道这听起来很奇怪，但这正是他们的要求，我需要交付。我想我可以从头开始写这样的组件，但如果有什么东西的话会更好。

有什么想法吗？

Answer 1

您可以编辑示例使用的HTML(每个数组有一个根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);
}

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