angular – 使用ng2-dragula拖动和交换网格列表

发布时间：2020-12-17 07:23:16 所属栏目：安全来源：网络整理

导读：我有一个列表网格,我试图使用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]="[

我有一个列表网格,我试图使用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,希望这将有助于您的工作.

首先,确保它正确包含在您的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!