angular-gridster获取拖拽后数据
时间: 2023-07-27 21:02:25 浏览: 56
在Angular中使用angular-gridster库,可以通过使用其提供的事件和方法来获取拖拽后的数据。
首先,我们需要在HTML文件中设置Gridster组件,并声明一个用于展示数据的数组:
```html
<gridster [options]="gridsterOptions" (gridsterItemChange)="onItemChange($event)">
<gridster-item *ngFor="let item of gridsterItems" [item]="item">
<!-- content -->
</gridster-item>
</gridster>
```
在组件的.ts文件中,需要定义gridsterOptions和gridsterItems变量,并使用相关的事件和方法来获取拖拽后的数据:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
gridsterOptions = {
// gridster options
};
gridsterItems = [
// initial items
];
onItemChange(event: any) {
// get gridster item change event
console.log(event);
// here you can access the dragged item's updated data
}
}
```
在onItemChange方法中,可以通过event参数访问拖拽后的数据。它包含了当前拖拽的GridsterItemComponent实例,我们可以从中获取更新后的数据。
例如,可以通过event.item获取更新后的位置信息、尺寸信息等。如果有其他自定义的数据需要获取,可以在GridsterItemComponent中设置相关属性并在event.item中访问。
以上是使用angular-gridster获取拖拽后数据的基本方法,你可以根据自己的需求进行进一步定制和处理。