在 2018 年使用 ng2-dragula
using ng2-dragula in 2018
似乎无法实现 ng2-dragula 嵌套拖放，尽管人们似乎正在寻找 "nested" 障碍的解决方案我个人无法通过该障碍。
我认为这是一个简单的布局，其中包含一个源 dragula 和多个目标 dragulas，诀窍在于尝试拖放这些目标组（"Client" 实例可在此处拖动）。
显然默认情况下点击和拖动操作会同时触发子 dragulas 和父 dragulas。
但是当尝试实施任何 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 年，angular/ng2-dragula none 他们工作。
几乎所有人都抛出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
更新 (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), () => {});
}
似乎无法实现 ng2-dragula 嵌套拖放，尽管人们似乎正在寻找 "nested" 障碍的解决方案我个人无法通过该障碍。
我认为这是一个简单的布局，其中包含一个源 dragula 和多个目标 dragulas，诀窍在于尝试拖放这些目标组（"Client" 实例可在此处拖动）。
显然默认情况下点击和拖动操作会同时触发子 dragulas 和父 dragulas。
但是当尝试实施任何 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 年，angular/ng2-dragula none 他们工作。
几乎所有人都抛出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
更新 (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), () => {});
}