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>