如何解决如何在 Flex 布局中使用 Angular Material Drag n Drop?
我正在尝试制作一个具有拖放功能并具有响应能力的网格。首先,我尝试使用 grid list,但找不到如何使其响应不同的屏幕尺寸。
我放弃了网格列表,并决定使用 angular flex layout 库来创建我自己的网格,该网格本身具有响应性。然后我尝试将其与 Angular Material Drag n Drop 结合使用,但它无法正常工作。
具体来说,我可以在网格元素周围拖动,但行为充其量是不稳定的。有时我可以重新排序元素,有时不能。有时我向左移动一个元素,它向右移动,有时相反。你得到了图片。这是不可预测的。另一个问题是,如果您四处拖动元素,网格中的其他元素会随机出现和消失。
我尝试阅读拖放文档,但我开始觉得它不应该按照我想要的方式工作。有没有人知道可能对我有用的实现?
这是我的代码:
my-component.html
<div fxFlex fxLayout="column" fxLayoutGap="1%">
<div fxLayout="row wrap" fxLayoutGap="16px grid"
cdkDropList
[cdkDropListData]="numbers"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let n of numbers"
fxFlex="25%"
fxFlex.md="33%"
fxFlex.sm="50%"
fxFlex.xs="100%"
cdkDrag>
<div fxLayout="row" style="width: 200px; height: 200px; background-color: red;">
Number: {{n}}
</div>
</div>
</div>
my-component.ts
import { Component,OnInit,ViewChild } from '@angular/core';
import { CdkDragDrop,CdkDropList,CdkDropListGroup,moveItemInArray } from "@angular/cdk/drag-drop";
@Component({
selector: 'app-menu',templateUrl: './my-component.html',styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit {
@ViewChild(CdkDropListGroup) listGroup!: CdkDropListGroup<CdkDropList>;
@ViewChild(CdkDropList) placeholder!: CdkDropList;
numbers = [1,2,3,4,5,6,7,8];
constructor() {
}
ngOnInit(): void {
}
drop(event: CdkDragDrop<number[]>) {
console.log("drop() prev index: " + event.prevIoUsIndex + ",cur index: " + event.currentIndex);
moveItemInArray(event.container.data,event.prevIoUsIndex,event.currentIndex);
}
}
解决方法
我非常努力地将 @angular/flex-layout
和 @angular/cdk/drag-drop
结合起来,但问题太多了。所以我用 css flex 做到了
它是响应式的。
import { Component } from "@angular/core";
import { CdkDragDrop } from "@angular/cdk/drag-drop";
@Component({
selector: "my-app",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]
})
export class AppComponent {
items = [0,1,2,3,4,5,6,7,8,9,10,11];
drop(event: CdkDragDrop<any>) {
this.items[event.previousContainer.data.index] = event.container.data.item;
this.items[event.container.data.index] = event.previousContainer.data.item;
}
}
.categories {
display: flex;
justify-content: space-between;
flex-wrap: wrap; /* NEW */
width: 100%;
}
.inner {
width: 100%;
height: 100%;
border: 1px solid blue;
text-align: center;
line-height: 5rem;
background-color: #efefef;
cursor: move;
}
.categories-item {
flex: 1 0 5rem; /* NEW */
margin: 5px; /* NEW */
background-color: transparent;
height: 5rem;
text-align: center;
line-height: 5rem;
position: relative;
}
.placeholder {
flex: 1 0 5rem; /* NEW */
margin: 5px; /* NEW */
background-color: white;
height: 5rem;
text-align: center;
line-height: 5rem;
border: 1px;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0,0.2,1);
}
<div #contenedor class="categories" cdkDropListGroup>
<ng-container *ngFor="let item of items;let i=index">
<div class="categories-item" cdkDropList cdkDropListOrientation="horizontal"
[cdkDropListData]="{item:item,index:i}" (cdkDropListDropped)="drop($event)">
<div class="inner" cdkDrag>
<div class="example-custom-placeholder" *cdkDragPlaceholder></div>
{{item}}
</div>
</div>
</ng-container>
</div>
{{items|json}}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。