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

Question

>我有一个列表网格，并尝试使用 ng2-dragula 相互拖动和交换网格的磁贴

一些组件.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)？

还是必须初始化德拉古拉服务？有没有更好的交换方式？

我

绝对是角度的新手，我发现这很难理解。任何提示将不胜感激？

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>