Невозможно реализовать вложенное перетаскивание ng2-dragula, даже если кажется, что люди находят решения "вложенного" препятствия, я не могу лично преодолеть этот барьер.
У меня есть то, что я думаю, это простая компоновка с исходной драгулой и множеством целевых драгул, хитрость заключается в попытке перетаскивания этих целевых групп (здесь можно перетаскивать экземпляры «Клиента»).
очевидно, что по умолчанию действие «щелкнуть и перетащить» запускает как дочерний, так и родительский драгулы.
но при попытке реализовать любой из параметров moves, accepts dragula они вызывают широкий спектр исключений.
accepts получает неопределенное значение для target, но наиболее часто встречающаяся ошибка -
TypeError: sourceModel.splice is not a function
, который я получаю за moves и invalid.
github не сильно помогает, так как у разработчиков есть дела поважнее (а в случае с ванильным драгулой уже давно нет).
проблема здесь в том, что каждый онлайн ругается на 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>
и мой тс:
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