使用NG2-dragula拖動和交換網列出

Question

我有名單的網格，我試圖拖動和相互利用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？有沒有更好的方法來替代？

我絕對是新來的角，我發現這種可笑的難以遵循。任何提示將不勝感激？

Answer 1

對於使用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>