如何解决Angular Material拖放cdk:将项目合二为一并交换元素
参考 Angular CDK Drag & Drop,我正在尝试构建以下视频中显示的内容:
https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9
我想同时实现两个功能:合并卡片和交换物品的位置。我在 Angular 材料中没有发现此功能。
所以我尝试了一个黑客:
在上图中假设 1,2,3,4,5,6 是我的数组值,0,1,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(fake element) 具有相同的高度并且在容器中可见,则上述逻辑对我来说很好用,如下面的视频所示:
但是如果我隐藏/不透明度= 0/设置可见性隐藏逻辑开始将交换识别为合并。
上述逻辑似乎对我不起作用,每当我放下卡片进行交换时,上述逻辑都会给出“合并”。
这是演示链接:Stackblitz demo
解决方法
我编写了一个自定义解决方案,因为它在任何地方都不可用
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。