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 demo

Answer 1

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

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