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