TypeScript ng2-dragula.DragulaService类代码示例

 constructor( private _dragula: DragulaService) {
     this._dragula.setOptions('questions', {
         moves: function(el, container, handle:HTMLElement) {
             return handle.classList.contains('dragula-handle');
         }
     });
 }

 constructor (private wikipediaService: TestService, private dragulaServie: DragulaService) {
     dragulaServie.setOptions('first-bag', {
         cancel: true
     });
     
     
     
 }

 constructor(private drag: DragulaService) {
   this.byteExtracts = 0;
   drag.setOptions('rule-patterns', {
     moves: function (el, container, handle) {
       return handle.className === 'material-icons';
     }
   });
 }

  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
      }
    });
  }

  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));
    });
  }

  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);
        }
    });
  }

 constructor(private dragulaService: DragulaService) {
     dragulaService.setOptions('third-bag', {
         removeOnSpill: true
     });
 }

 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();
 }