angular - Angular 材质拖放 cdk:将项目合二为一并交换元素
问题描述
参考 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 演示
解决方案
我写了一个自定义解决方案,因为它在任何地方都不可用
推荐阅读
- reactjs - 页脚页面结束距离
- android-studio - 使用片段在适配器中添加上下文和数组列表
- pygame - 玩家在 pygame 中指向鼠标时出现故障
- fpdf - FPDI-2.3.6“致命错误:未捕获的错误:未找到类“FPDI””(2021)
- mysql - 是否可以在 Mysql 中替换链接并将其设为空白?
- flutter - Flutter:允许容器内溢出?
- maven - 找不到火花“三角洲”源
- flutter - 导航抽屉未在颤动中从 APPBar 小部件打开
- html - 如何将字段集设置为 flex 以使图例位于内容的左侧?
- flutter - 在 android studio 中运行颤振项目时出现“意外的内核 SDK 版本”错误