我有一个列表网格,我试图使用ng2-dragula拖动和交换网格的瓷砖
some.component.html
<md-grid-list rowHeight="200px" id = "cover" >
<md-grid-tile *ngFor="let werbedata of werbedaten"
[class.selected]="werbedata === selectedWerbedata"
[routerLink]="['/flyerdetail',werbedata.artnr]"
[style.background]="'lightblue'" class = "blocks"
[dragula]='"bag-one"'>
<md-list class="example-card">
<md-list-item>Produktname: {{ werbedata.werbetext }}</md-list-item>
<md-list-item>Euro: {{ werbedata.euro }}</md-list-item>
<h3 md-line> Artnr: {{ werbedata.artnr }} </h3>
<p md-line> Werbetext: {{ werbedata.werbetext }} </p>
</md-list>
</md-grid-tile>
</md-grid-list>
some.component.ts
export class FlyerComponent implements OnInit {
werbedaten: WerbeData[];
selectedWerbedata: WerbeData;
constructor( private werbedatenService: WerbeDatenService ){};
...
...
}
我的想法是在Drop事件上交换数据.是否有可以像这样添加到HTML的onDrop事件？
(onDrop)=“swap(data)”然后在组件类中执行swap(data：any)？
或者我必须初始化dragulaservice？是否有更好的交换方式？
对于棱角分明的我来说,我是个新人,我发现这个非常难以跟随.任何提示将不胜感激？
对于使用ng2-dragula从一个列表简单拖动到另一个列表,您不需要对任何事件执行操作,指令会为您处理.从一个列表交换到另一个列表似乎不受支持,但我提供了一个简单的setyp,希望这将有助于您的工作.
原文链接：https://www.f2er.com/angularjs/141821.html首先,确保它正确包含在您的app.module.ts中
import { DragulaModule } from 'ng2-dragula';
...
@NgModule({
declarations: [
AppComponent
],imports: [
DragulaModule,...
],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}
在您的组件中,您需要创建列表.您可能还需要包含node_modules / dragula / dist / dragula.css中的css文件.
我已经添加了对drop事件的绑定,就像你对它的好奇一样.此方案只是将新列表打印到控制台并演示双向绑定.
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css','./dragula.min.css']
})
export class AppComponent {
list1: number[] = [1,2,3,4];
list2: number[] = [5,6,7,8];
constructor(private dragulaService: DragulaService) {
dragulaService.drop.subscribe((value) => {
this.onDrop(value.slice(1));
});
}
private onDrop(args) {
console.log(this.list1);
console.log(this.list2);
}
}
在模板中,您需要添加dragula和dragulaModel指令,它们提供双向数据绑定.请注意,两个列表都具有相同的“包”.
<ul [dragula]='"bag-one"' [dragulaModel]='list1'>
<li *ngFor="let item of list1">{{ item }}</li>
</ul>
<ul [dragula]='"bag-one"' [dragulaModel]='list2'>
<li *ngFor="let item of list2">{{ item }}</li>
</ul>
