本文整理汇总了TypeScript中ng2-dragula/ng2-dragula.DragulaService.setOptions方法的典型用法代码示例。如果您正苦于以下问题:TypeScript DragulaService.setOptions方法的具体用法?TypeScript DragulaService.setOptions怎么用?TypeScript DragulaService.setOptions使用的例子?那么, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类ng2-dragula/ng2-dragula.DragulaService
的用法示例。
在下文中一共展示了DragulaService.setOptions方法的8个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: constructor
constructor( private _dragula: DragulaService) {
this._dragula.setOptions('questions', {
moves: function(el, container, handle:HTMLElement) {
return handle.classList.contains('dragula-handle');
}
});
}
示例2: constructor
constructor (private wikipediaService: TestService, private dragulaServie: DragulaService) {
dragulaServie.setOptions('first-bag', {
cancel: true
});
}
示例3: constructor
constructor(private drag: DragulaService) {
this.byteExtracts = 0;
drag.setOptions('rule-patterns', {
moves: function (el, container, handle) {
return handle.className === 'material-icons';
}
});
}
示例4: constructor
constructor(private routeParams: RouteParams, private af: AngularFire, private dragulaService: DragulaService) {
af.auth.asObservable().filter(user => user !== null).subscribe(user => { // Skip null values
this.boardURL = 'users/' + user.uid + '/boards/' + routeParams.get('key');
this.board = af.object(this.boardURL);
this.lists = af.list(this.boardURL + '/lists', { query: { orderByChild: 'priority' } });
this.tasks = af.list(this.boardURL + '/tasks', { query: { orderByChild: 'priority' } });
this.listObservable = af.list(this.boardURL + '/lists');
this.taskObservable = af.list(this.boardURL + '/tasks');
});
// The outer list can only be dragged by a handle. To prevent overlapping drag boxes.
dragulaService.setOptions('listBag', {
moves: function (el, container, handle) {
return handle.className === 'handle';
}
});
dragulaService.drop.subscribe(([bag, element, target, source, next]) => {
// Look at the adjacent tasks in the list and pick a priority in the middle
let prev = element.previousElementSibling;
if (bag === 'taskBag') {
let observables: Observable<Task>[] = [Observable.of(undefined), Observable.of(undefined), Observable.of(undefined)];
// Get the keys from the DOM. Stored in data-key attributes.
if (prev != null && prev.className === 'task') observables[0] = (af.object(this.boardURL + '/tasks/' + prev.dataset.key));
if (element != null && element.className === 'task') observables[1] = (af.object(this.boardURL + '/tasks/' + element.dataset.key));
if (next != null && next.className === 'task') observables[2] = (af.object(this.boardURL + '/tasks/' + next.dataset.key));
Observable.zip(...observables) // Combine the observables then subscribe asynchronously
.take(1) // only subscribe once
.subscribe(([previousTask, movedTask, nextTask]: Task[]) => {
let lower = -4; // arbitrary
let upper = 4; // arbitrary
if (previousTask && previousTask.priority != null) {
lower = previousTask.priority;
} else if (nextTask && nextTask.priority != null) {
lower = nextTask.priority - 4;
}
if (nextTask && nextTask.priority != null) {
upper = nextTask.priority;
} else if (previousTask && previousTask.priority != null) {
upper = previousTask.priority + 4;
}
// Update the priority of the moved task in the database
movedTask.priority = lower + (Math.abs(upper - lower) / 2);
// Check if it swapped to a different list
if (target.dataset.key !== source.dataset.key) {
movedTask.list = target.dataset.key;
}
this.taskObservable.update(element.dataset.key, movedTask);
});
} else if (bag === 'listBag') {
// TODO reorder the lists, similar as above
}
});
}
示例5: ngOnInit
ngOnInit() {
this.dragulaModel = this.publishFreeReorder.files;
this.myDragula.setOptions(UUID.UUID(), {
moves: (el: Element, source: Element, handle: Element) => {
return handle.classList.contains('drag-handle');
}
});
this.dragSub = this.myDragula.dropModel.subscribe(() => {
this.publishFreeReorder.reassign();
});
super.ngOnInit();
}
示例6: constructor
constructor( private dragulaService: DragulaService) {
this.leftColor = '#F44336';
this.rightColor = '#D32F2F';
this.textColor = '#FFFFFF';
this.leftPoints = '125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2';
this.rightPoints = '125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30';
this.textD = 'M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1L125,52.1z M142,135.4H108l17-40.9L142,135.4z';
dragulaService.setOptions('shield', {
moves: function (el, source, handle, sibling) {
switch (el.id) {
case 'left':
case 'right':
case 'text':
return false;
default:
return true;
}
},
accepts: function (el, target, source, sibling) {
switch (target.id) {
case 'left':
case 'right':
case 'text':
return true;
default:
return false;
}
},
copy: true
});
dragulaService.drag.subscribe((value) => {
this.colorDragging = true;
});
dragulaService.over.subscribe((value) => {
this.onOver(value.slice(1));
});
dragulaService.out.subscribe((value) => {
this.onOut(value.slice(1));
});
dragulaService.drop.subscribe((value) => {
this.colorDragging = false;
this.buttonClicked = false;
this.onDrop(value.slice(1));
});
}
示例7: initializeDragAndDrop
public initializeDragAndDrop(
dragulaService: DragulaService,
dropCallback: (newColumnIds: Array<string>) => void) {
dragulaService.drag.subscribe(([, source]: Array<HTMLElement>) =>
source.classList.add(GRID_HEADER_DRAGGING_CLASS)
);
dragulaService.dragend.subscribe(([, source]: Array<HTMLElement>) =>
source.classList.remove(GRID_HEADER_DRAGGING_CLASS)
);
dragulaService.drop.subscribe(([, , container]: Array<HTMLElement>) => {
let columnIds: string[] = [];
let nodes = container.getElementsByTagName('th');
for (let i = 0; i < nodes.length; i++) {
let el = nodes[i];
let id = el.getAttribute('sky-cmp-id');
columnIds.push(id);
}
dropCallback(columnIds);
});
dragulaService.setOptions('sky-grid-heading', {
moves: (el: HTMLElement, container: HTMLElement, handle: HTMLElement) => {
return !handle.matches(GRID_HEADER_LOCKED_SELECTOR);
},
accepts: (
el: HTMLElement,
target: HTMLElement,
source: HTMLElement,
sibling: HTMLElement) => {
return sibling === undefined || !sibling || !sibling.matches(GRID_HEADER_LOCKED_SELECTOR);
}
});
}
示例8: constructor
constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('third-bag', {
removeOnSpill: true
});
}