参考 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(假元素)具有相同的高度并且在容器中可见,则上述逻辑对我来说很好,如下面的视频所示:
但是,如果我隐藏/不透明度 = 0/设置可见性隐藏,则逻辑开始将交换识别为合并。
上述逻辑似乎对我不起作用,每当我放下卡进行交换时,上述逻辑都会给出“合并”。
这是演示链接:Stackblitz 演示