2018年使用ng2-dragula

Question

似乎无法实现ng2-dragula嵌套拖动和下降，即使人们似乎正在寻找“嵌套”障碍的解决方案，我个人无法通过这个障碍。

我认为这是一个带有源dragula和多个目标Dra古拉的简单布局，其诀窍在于尝试拖放这些目标组("Client“实例在这里是可拖动的)。

​

​

显然，默认情况下，单击和拖动操作会同时触发子和父dra古拉斯。

但是，当尝试实现任何moves、invalid、accepts dragula选项时，它们会触发大量异常。

accepts为target获取未定义的信息，但最常见的错误是

TypeError: sourceModel.splice is not a function

这是moves和invalid都能得到的。

github没有多大帮助，因为开发人员有更好的事情要做(在香草dragula的例子中，它早就消失了)。

这里的问题是，每个人都在网上宣誓使用以下解决方案的N个变体：

  options = {
    direction: 'horizontal',
    isContainer: function (el) {
      return el.classList.contains('bag-two');
    },
    moves: function(el, container, target) {
      return target.classList.contains('handle');
    }
  };

options = {
    direction: 'horizontal',
    moves: function (el, container, handle) {
      return handle.classList.contains('handle');
    },
}
  options = {
    direction: 'horizontal',
    invalid: (element, source, handle, sibling, event) => {element.className.includes('bag-one')},
  };

事实是2018年，在角形/NG2-Dragula中，没有一种是可行的。

几乎所有的人都抛出TypeError: sourceModel.splice is not a function

这是我的html：

<div class="root" [ngClass]="' ' + opened">
  <div class="customer-groups-view flex">
    <div class="sidebar">
      <div class="ellipsis">Nouveau Clients : </div>
      <div class="allow-scroll-bottom">
        <div *ngFor="let una of unassigned" [dragula]="'bag-one'" [dragulaModel]="una">
          <app-pane [titleI]="una" [valueI]="una"></app-pane>
        </div>
      </div>
    </div>


    <div class="customer-groups flex-1">
      <div class="flex allow-scroll-right">
        <div *ngFor="let group of groups" [dragula]="'bag-two'" [dragulaModel]="group" [dragulaOptions]="options" class="bag-two flex">
          <div class="customer-group ff" >
            <div class="group-title ellipsis">Client</div>
            <div class="elem-list" (click)="$event.stopPropagation()">
              <div *ngFor="let elem of groupList" [dragula]="'bag-one'" [dragulaModel]="elem">
                <app-pane delayDrag  [titleI]="elem" [valueI]="elem"></app-pane>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的ts：

import {AfterViewInit, Component, ElementRef, OnInit} from '@angular/core';
import {conf} from '../common/services/variables';
import {InternationalizedNotifService} from '../common/services/i18n-ed.notif.service';
import {SnotifyService} from 'ng-snotify';
import {Apis} from '../common/api/apis';
import {StoreService} from '../common/services/store.service';
import {DragulaService} from 'ng2-dragula';
import dragula from 'dragula';
import autoScroll from 'dom-autoscroller';

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss']
})
export class Groups implements OnInit, AfterViewInit {

  options = {
    direction: 'horizontal',
    invalid: (element, source, handle, sibling, event) => {element.className.includes('bag-one')},
  };
  justCalledGetCustomersAPItimeout;
  resetCalled = false;
  opened = false;
  scrollAmount;
  data;
  scroll: any;

  groupList = [
    'aadsd',
    'zqds',
    'yghibv',
  ];
  unassigned = [
    'aaappdd',
    'a8d',
    'aaappdd',
    'aaappdd',
    'aaappdd',
    'aa1',
  ];
  groups = [
    'aaadzdaze',
    'aaadzdaze',
    'aaadzdaze',
    'adf',
    'aaadzdaze',
  ];


  constructor(
    private api: Apis,
    private store: StoreService,
    private element: ElementRef,
    private notif18nMessages: InternationalizedNotifService,
    private snotifyService: SnotifyService) {
  }

  ngOnInit() {
    this.doCallWithNotif('getCustomers');
    this.store.topBarOpened$.subscribe(bool => {
      if(bool === true || bool === false) this.opened = bool;
    }, (error) => console.log(error), () => {});

  }

  ngAfterViewInit(){
    const th = this;
    this.scrollAmount = this.element.nativeElement.querySelector('.allow-scroll-right');
    this.scrollAmount.addEventListener('wheel', e => {
      th.scrollAmount.scrollLeft -= (e.wheelDelta)/1.5
    }, false);
  }

编辑:：

事实上，我能得到的最好的行为是，当我删除所有的[dragulaModel]时，至少在其中一个可拖集上，我得到了想要的行为:客户机。

拖动子对象将导致成功拖动父文件，然后生成以下内容：

TypeError: Cannot read property '0' of undefined

Answer 1

最新情况(21-11-2018年)和附带说明：

最后，我没有使用dragula作为角-dragula的维护者自己建议我反对它。我最终实现了本机拖放，而没有使用任何库，它工作得更好，给了我更多的选项。

答：

好的解决了：

你必须把[dragula]="'bag-two'" [dragulaModel]="group" [dragulaOptions]="options"放在*ngIf的上面，不要乱动。

还要确保指向数组或数组，而不是字符串数组。

另外，DOM中作为参数的选项也不能工作。

最后，代码将如下所示：

<div class="root" [ngClass]="' ' + opened">
  <div class="customer-groups-view flex">
    <div class="sidebar">
      <div class="ellipsis">Nouveau Clients : </div>
      <div class="allow-scroll-bottom" [dragula]="'bag-one'" [dragulaModel]="una">
        <div *ngFor="let una of unassigned">
          <app-pane [titleI]="una[0]" [valueI]="una[0]"></app-pane>
        </div>
      </div>
    </div>


    <div class="customer-groups flex-1">
      <div class="flex allow-scroll-right" [dragula]="'bag-two'" [dragulaModel]="group">
        <div *ngFor="let group of groupList" class="bag-two">
          <div class="customer-group" >
            <div class="flex"><div class="handle">X</div><div class="group-title ellipsis">Client</div></div>
            <div class="elem-list" [dragula]="'bag-one'" [dragulaModel]="elem">
              <div *ngFor="let elem of group" class="bag-one">
                <app-pane [titleI]="elem[0]" [valueI]="elem[0]"></app-pane>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ts：

import {AfterViewInit, Component, ElementRef, OnInit} from '@angular/core';
import {conf} from '../common/services/variables';
import {InternationalizedNotifService} from '../common/services/i18n-ed.notif.service';
import {SnotifyService} from 'ng-snotify';
import {Apis} from '../common/api/apis';
import {StoreService} from '../common/services/store.service';
import {DragulaService} from 'ng2-dragula';

@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss']
})
export class Groups implements OnInit, AfterViewInit {

  justCalledGetCustomersAPItimeout;
  resetCalled = false;
  opened = false;
  scrollAmount;
  data;
  scroll: any;

  groupList = [
    [
      ['aaadzdaze'],
      ['aaadzdaze'],
      ['aaadzdaze'],
    ],
    [
      ['adf'],
      ['aaadzdaze'],
    ],
    [
      ['aaadzdaze'],
      ['aaa'],
    ],
    [
      ['aaadfe'],
      ['aafdfaze'],
    ]
  ];
  unassigned = [
    ['aaappdd'],
    ['aaappdd'],
    ['aaddfsppdd'],
    ['aaappdd'],
    ['aa4'],
    ['aaappdd'],
    ['a8d'],
    ['aaappdd'],
    ['aaap5appdd'],
    ['aaappdd'],
    ['aaappdd'],
    ['aa1'],
    ['aaappdd'],
    ['aaappdd'],
    ['aaddfsppdd'],
    ['aaappdd'],
    ['aa4'],
    ['aaappdd'],
    ['a8d'],
    ['aeappdd'],
    ['aaap5appdd'],
    ['aaappdd'],
    ['aaappdd'],
    ['aa1'],
    ['aaapupdd'],
    ['afadd'],
    ['aaddfsppdd'],
    ['aaappdd'],
    ['aa4'],
    ['aaappdd'],
    ['a8d'],
    ['aaappdd'],
    ['aaap5appdd'],
    ['aaappdd'],
    ['aaappdd'],
    ['aa1'],
  ];



  constructor(
    private api: Apis,
    private store: StoreService,
    private element: ElementRef,
    private notif18nMessages: InternationalizedNotifService,
    private snotifyService: SnotifyService,
    private dragulaService: DragulaService) {
    this.dragulaService.setOptions('bag-two', {
      moves: function (el, container, handle) {
        return handle.className === 'handle';
      }
      // moves: (element, source, handle, sibling) => {
      //   if (handle.className.includes('bag-one')) {
      //     return false;
      //   }
      //   return true;
      // }
    });
  }

  ngOnInit() {
    this.doCallWithNotif('getCustomers');
    this.store.topBarOpened$.subscribe(bool => {
      if(bool === true || bool === false) this.opened = bool;
    }, (error) => console.log(error), () => {});
  }