标签: ng2-dragula

我已经能够成功地ng2-dragula与我的项目集成,但我仍然无法弄清楚如何制作一些div non draggable.

我试图使用一些css和htmls draggable="false"为div但没有成功.看起来就像我放的那样,dragula会在之后插入其指令并覆盖所有内容.也许我错了......

有谁知道如何实现这一目标？

例如:

<div [dragula]="'group'">
    <div>1</div>
    <div>2</div>
    <div [dragula]="'group'">
        <div>3</div>
        <div class="donotdrag">4</div>
        <div>5</div>
    </div>
</div>

我如何使div同类donotdrag不可拖动？

我试图阻止用户移动第一个元素dragulaService,代码第一次运行没有任何错误,但是当我离开这个页面然后再次打开它时,我收到错误.

导致错误的代码:

constructor(public service:SmartTablesService, private dragulaService:DragulaService) {
    dragulaService.setOptions('nested-bag', {
      revertOnSpill: true,
      moves: function (el:any, container:any, handle:any):any {
        if (handle.className === 'sorting-table-title') {
          return false;
        } else {
          return true;
        }

      }
    });

错误是:

error_handler.js:48 EXCEPTION:未捕获(在承诺中):错误:./SortTableComponent类中的错误SortTableComponent_Host - 内联模板:0:0引起:名为:"nested-bag"的包已存在.错误:包名为:"nested-bag"已经存在.在DragulaService.add(http://platform.local:8080/3.chunk.js:1070:19)处于DragulaService.setOptions(http://platform.local:8080/3.chunk.js:1099:24)在新的SortTableComponent(http://platform.local:8080/3.chunk.js:1311:24)

我想利用TI dragula在我angular2应用程序.这是我的代码中的app.module:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';

    import { DragulaService, DragulaModule } from 'ng2-dragula/ng2-dragula';
    import { AppComponent } from './app.component';
    import { PlayComponent } from './play/play.component';
    import {SelectedInstrumentsService} from './selected-instruments.service';
    import {SizeService} from './size.service';
    import {AudioFinderService} from './audio-finder.service';

    @NgModule({
      declarations: [
        AppComponent,
        PlayComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,DragulaModule
      ],
      providers: [DragulaService,SelectedInstrumentsService,SizeService,AudioFinderService],
      bootstrap: [AppComponent]
    })

export class AppModule { } …

我有一个由用户动态生成的表单：

  // this._fb is a FormBuilder
  ngOnInit():void {
    this.myForm = this._fb.group({
      message: this._fb.array([
      ])
    });

生成的json类似于

{
  "message": [
    {
      "type": 1,
      "value": "first message",
    },
    {
      "type": 1,
      "value": "second message",
    }
  ]
}

我添加了 ng2-dragula 指令以更改消息顺序

<form [formGroup]="myForm">
  <div formArrayName="message">
    <div [dragula]='"bag-one"' [dragulaModel]='myForm.controls.message.controls'>
      <div *ngFor="let c of myForm.controls.message.controls; let i=index" class="panel panel-default" >
        <div class="panel-body" [formGroupName]="i">
          <label>value</label>
          <input type="text" class="form-control" formControlName="value">
        </div>
      </div>
    </div>
  </div>

拖动功能运行良好，但是当我显示表单的 json 时，它仍然是旧顺序，除非我开始更改字段的内容。在这种情况下，表单已更新。

使用默认启动 Angular-Cli 7 项目并按照此处描述的步骤操作：https : //github.com/valor-software/ng2-dragula来设置 ng2-dragula，编译失败。

ng2-dragula 2.1.0（最新）。

详细信息：

ERROR in node_modules/ng2-dragula/dist/MockDrake.d.ts(41,5): error      TS2416:    Property 'on' in type 'MockDrake' is not assignable to the same property in base type 'DrakeWithModels'.
Type '(event: string, callback: Function) => void' is not assignable to type '(events: string, callback: Function) => Drake'.
Type 'void' is not assignable to type 'Drake'.

i ?wdm?: Failed to compile.

开发。系统信息：

Angular CLI: 7.0.3
Node: 8.11.4
OS: win32 x64
Angular: 7.0.1
... animations, common, compiler, compiler-cli, …

http://akserg.github.io/ng2-webpack-demo/#/dnd 这是使用angular2进行此拖放的演示,那么如何影响我的类css以指示此区域是可放置区域

这是来自github源项目的代码的一部分

 _onDragEnterCallback(event: MouseEvent) {
     if (this._dragDropService.isDragged) {
         this._elem.classList.add(this._config.onDragEnterClass);
         this.onDragEnter.emit({dragData: this._dragDropService.dragData, mouseEvent: event});
     }
 }

我怎么能影响我的班级到这一行 this._elem.classList.add(this._config.onDragEnterClass);

我正在使用 ng2-dragula 进行拖放功能。当我在末尾拖放第一个元素（或任何元素），然后尝试使用 addNewItem 按钮将新项目添加到数组时，我看到问题，新项目没有添加到末尾。如果我不将元素拖到最后，新项目将添加到 UI 的末尾。我希望在任何情况下新项目都显示在底部。任何帮助表示赞赏。这个问题在 Angular 7 中无法重现。我发现 Angular 9 中也出现了这种情况

JS

export class SampleComponent {

  items = ['Candlestick','Dagger','Revolver','Rope','Pipe','Wrench'];
  constructor(private dragulaService: DragulaService) { 
    dragulaService.createGroup("bag-items", {
      removeOnSpill: false
    });
  }

  public addNewItem() {
    this.items.push('New Item');
  }
}

超文本标记语言

<div class="container" [dragula]='"bag-items"' [(dragulaModel)]='items'>
    <div *ngFor="let item of items">{{ item }}</div> 
</div>

<button id="addNewItem" (click)="addNewItem()">添加新项目

我从评论中编辑了 stackblitz，以帮助可视化问题。当一个单位被拖到列表底部时，这似乎会被触发。更新了 stackblitz ：https://stackblitz.com/edit/ng2-dragula-base-ykm8fz ?file=src/app/app.component.html ItemsAddedOutOfOrder