[英]Angular material drag drop cdk: Combining items into one and swapping the elements
With reference to Angular CDK Drag & Drop, I'm trying to build something shown in the video below:参考 Angular CDK 拖放,我正在尝试构建以下视频中显示的内容:
https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9 https://gyazo.com/218cd5efb6ebe5649ee431a7df47c1e9
I want to achieve two features together: Merging cards and swapping the positions of items.我想同时实现两个功能:合并卡片和交换项目的位置。 I don't find this feature available in Angular material.我在 Angular 材料中找不到此功能。
So I tried a hack:所以我尝试了一个hack:
In this above image assume 1,2,3,4,5,6 are my array values and 0,1,2,3,4,5 are my array indexes.在上图中,假设 1,2,3,4,5,6 是我的数组值,0,1,2,3,4,5 是我的数组索引。
I tried a logic to identify merge and swap case:我尝试了一种逻辑来识别合并和交换案例:
Note: Added -1 id record before and after the real element.注意:在真实元素前后添加了-1 id 记录。
Merge case is: from a previousIndexValue > -1 && currentIndexValue > -1 (except before/after of current element) else Swap case合并案例是:从 previousIndexValue > -1 && currentIndexValue > -1(当前元素之前/之后除外)否则交换案例
The code is:代码是:
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"); }
The above logic works fine for me if the -1(fake element) has the same height and visible in the container as shown in the video below:如果-1(假元素)具有相同的高度并且在容器中可见,则上述逻辑对我来说很好,如下面的视频所示:
https://youtu.be/1HUOSeyWVPs https://youtu.be/1HUOSeyWVPs
But if I hide/opacity = 0/set visibility hidden the logic starts identifying swap as merge.但是,如果我隐藏/不透明度 = 0/设置可见性隐藏,则逻辑开始将交换识别为合并。
The above logic doesn't seem to be working for me, whenever I drop the card for swap the above logic gives "Merge".上述逻辑似乎对我不起作用,每当我放下卡进行交换时,上述逻辑都会给出“合并”。
Here is the demo link: Stackblitz demo这是演示链接: Stackblitz 演示
I wrote a custom solution since it is not available anywhere我写了一个自定义解决方案,因为它在任何地方都不可用
https://stackblitz.com/edit/angular-zhtdnq-lexssj https://stackblitz.com/edit/angular-zhtdnq-lexssj
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.