2018 年使用 ng2-dragula

Posted 2023-05-08

【中文标题】2018 年使用 ng2-dragula

【英文标题】：using ng2-dragula in 2018

【发布时间】：2018-12-08 19:17:14

【问题描述】：

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

我认为这是一个简单的布局，其中包含一个源 Dragula 和多个目标 Dragula，诀窍在于尝试拖放这些目标组（“客户端”实例可在此处拖动）。

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

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

accepts 得到一个未定义的 target 但最常见的错误是

TypeError: sourceModel.splice is not a function

moves 和 invalid。

github 并没有太大帮助，因为开发人员有更好的事情要做（在 vanilla 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 年，在 angular/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]s 时，至少我在其中一个可拖动集上获得了所需的行为：客户端。

拖动一个孩子将导致成功拖动父母，然后是：

TypeError: Cannot read property '0' of undefined

【参考方案1】：

更新 (21-11-2018) 和旁注：

我最终没有使用 Dragula，因为 angular-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), () => );