1.11 ionic3入門——ion-fab懸浮按鈕的拖拽，ionic指令

上一節咱們談到ionic自帶的ion-fab功能都不錯，但有着不能拖拽的先天不足，這就致使其實用性大大下降，試想，一個不能任意拖拽的懸浮按鈕，這到底有多不方便，本節用新建指令的方法實現了懸浮按鈕的拖拽功能。
（1）什麼是指令（directive）

<button ion-button block color="dnger" (click)="logIn(username,password)" style="opacity: 0.7;">登錄</button> 

以上是一個按鈕，爲html中常見的button元素，不知道你注意到沒，若是沒在ionic框架中，你不能使用ion-button，可是這裏能夠，由於ion-button正是ionic的一個指令，其中ion是ionic的命名空間，而-後面的button則是指令名，還有諸如ion-label、ion-col之類的。在ionic中也常常用到angular框架的指令，好比ng-for、ng-repeat之類的。
我以爲能夠把指令看成屬性，也就是我這裏要經過自定義指令（也能夠理解成本身寫一個屬性，這個屬性能被項目中全部元素使用）來實現懸浮按鈕的隨着手指拖拽而移動的功能。
（2）新建指令

ionic g directive AbsoluteDrag

這時在src文件夾裏會新建一個directives文件夾，文件夾中有directives.module.ts文件和咱們剛剛新建的absoulute-drag文件夾，裏面僅有一個ts文件。
（3）替換absoulute-drag.ts中的代碼，以下

import { Directive, Input, ElementRef, Renderer } from '@angular/core';
import { DomController } from 'ionic-angular';

/**
 * Generated class for the AbsoluteDragDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
    selector: '[absolute-drag]'
  })
export class AbsoluteDragDirective {
    @Input('startLeft') startLeft: any;
    @Input('startTop') startTop: any;
 
    constructor(public element: ElementRef, public renderer: Renderer, public domCtrl: DomController) {
 
    }
 
    ngAfterViewInit() {
 
        this.renderer.setElementStyle(this.element.nativeElement, 'position', 'absolute');
        this.renderer.setElementStyle(this.element.nativeElement, 'left', this.startLeft + 'px');
        this.renderer.setElementStyle(this.element.nativeElement, 'top', this.startTop + 'px');
 
        let hammer = new window['Hammer'](this.element.nativeElement);
        hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_ALL });
 
        hammer.on('pan', (ev) => {
          this.handlePan(ev);
        });
 
    }
 
    handlePan(ev){
 
        let newLeft = ev.center.x;
        let newTop = ev.center.y;
        let height = document.body.clientHeight;
        let see_heiht = height - 200;
 
        this.domCtrl.write(() => {
            this.renderer.setElementStyle(this.element.nativeElement, 'left', '0px');

            if(newTop<=50){
                this.renderer.setElementStyle(this.element.nativeElement, 'top', '50px');
            }
            else if(newTop>=see_heiht){
                this.renderer.setElementStyle(this.element.nativeElement, 'top', see_heiht+'px');
            }
            else{
                this.renderer.setElementStyle(this.element.nativeElement, 'top', newTop + 'px');
            }
            
        });
 
    }

}

 

（4）配置
我這裏是在我建的自定義組建中使用的，因此我在components.module.ts中引用了AbsoluteDragDirective

import { AbsoluteDragDirective } from '../directives/absolute-drag/absolute-drag'; 

並在declarations聲明瞭AbsoluteDragDirective

declarations: [SuspendBtnComponent,AbsoluteDragDirective], 

（5）使用
在ion-fab中加入absolute-drag startLeft="0" startTop="200"

<ion-fab absolute-drag startLeft="0" startTop="200">
    <button  ion-fab color="light" style="opacity: 0.8"><ion-icon name="md-add" color="dark" large></ion-icon></button>
    <ion-fab-list side="right">
      <button ion-fab><ion-icon name="ios-call" color="danger"></ion-icon></button>
    </ion-fab-list>
    <ion-fab-list side="top">
        <button ion-fab><ion-icon name="ios-megaphone" color="primary"></ion-icon></button>
    </ion-fab-list>
    <ion-fab-list side="bottom">
        <button ion-fab><ion-icon name="ios-clipboard" color="secondary"></ion-icon></button>
    </ion-fab-list>
</ion-fab>