时间戳

首页 > 解决方案 > 带按钮的角度拖放列表

angular - 带按钮的角度拖放列表

问题描述

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

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

请求的按钮是：

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

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

有任何想法吗？

标签： angularangular-materialdrag-and-drop

解决方案

您可以编辑示例使用的 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);
 }

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

推荐阅读