Angular material 拖放 cdk：将项目合并为一个并交换元素
Angular material drag drop cdk: Combining items into one and swapping the elements
参考 Angular CDK 拖放，我正在尝试构建以下视频中显示的内容：
https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9
我想同时实现两个功能：合并卡片和交换物品的位置。我在 Angular material.
中找不到此功能
所以我尝试了破解：
在上图中，假设 1、2、3、4、5、6 是我的数组值，0、1、2、3、4、5 是我的数组索引。
我尝试了一种逻辑来识别合并和交换案例：
注意：在真实元素前后添加-1 id记录
合并案例是：
来自 previousIndexValue > -1 && currentIndexValue > -1（当前的 before/after 除外
元素）
别的
交换大小写
密码是：
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（假元素）具有相同的高度并且在容器中可见，如以下视频所示，上述逻辑对我来说工作正常：
但是如果我 hide/opacity = 0/设置可见性隐藏逻辑开始将交换识别为合并。
上面的逻辑似乎对我不起作用，每当我放下卡片进行交换时，上面的逻辑都会给出“合并”。
这是演示 link：Stackblitz demo
我写了一个自定义解决方案，因为它在任何地方都不可用
参考 Angular CDK 拖放，我正在尝试构建以下视频中显示的内容：
https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9
我想同时实现两个功能：合并卡片和交换物品的位置。我在 Angular material.
中找不到此功能所以我尝试了破解：
在上图中，假设 1、2、3、4、5、6 是我的数组值，0、1、2、3、4、5 是我的数组索引。
我尝试了一种逻辑来识别合并和交换案例：
注意：在真实元素前后添加-1 id记录
合并案例是： 来自 previousIndexValue > -1 && currentIndexValue > -1（当前的 before/after 除外 元素） 别的 交换大小写
密码是：
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（假元素）具有相同的高度并且在容器中可见，如以下视频所示，上述逻辑对我来说工作正常：
但是如果我 hide/opacity = 0/设置可见性隐藏逻辑开始将交换识别为合并。
上面的逻辑似乎对我不起作用，每当我放下卡片进行交换时，上面的逻辑都会给出“合并”。
这是演示 link：Stackblitz demo
我写了一个自定义解决方案，因为它在任何地方都不可用