Angular 材质拖放 cdk: 合二为一并交换元素

Question

参考 Angular CDK 拖放，我正在尝试构建以下视频中显示的内容：

https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9

我想同时实现两个功能：合并卡片和交换项目的位置。 我在 Angular 材料中找不到此功能。

所以我尝试了一个hack：

在上图中，假设 1,2,3,4,5,6 是我的数组值，0,1,2,3,4,5 是我的数组索引。

我尝试了一种逻辑来识别合并和交换案例：

注意：在真实元素前后添加了-1 id 记录。

合并案例是：从 previousIndexValue > -1 && currentIndexValue > -1（当前元素之前/之后除外）否则交换案例

代码是：

const previousIndex = event.previousIndex;
    const currentIndex = event.currentIndex;
    const prevSiblingIndex = previousIndex - 1;
    const nextSiblingIndex = previousIndex + 1

    if (currentIndex === prevSiblingIndex || currentIndex === nextSiblingIndex) {
      return true;
    }
    const previousCard = cards[previousIndex].id;
    const currentCard = cards[currentIndex].id;

    if (previousCard === currentCard) {
      return true;
    }

    if (previousCard > -1 && currentCard > -1) { console.log("Merge") }
    else { console.log("Swap"); }

如果-1（假元素）具有相同的高度并且在容器中可见，则上述逻辑对我来说很好，如下面的视频所示：

https://youtu.be/1HUOSeyWVPs

但是，如果我隐藏/不透明度 = 0/设置可见性隐藏，则逻辑开始将交换识别为合并。

上述逻辑似乎对我不起作用，每当我放下卡进行交换时，上述逻辑都会给出“合并”。

这是演示链接： Stackblitz 演示

Answer 1

我写了一个自定义解决方案，因为它在任何地方都不可用

https://stackblitz.com/edit/angular-zhtdnq-lexssj