上一节我们谈到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>
