【发布时间】：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
【问题讨论】：
标签： angular drag-and-drop draggable