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>

 

转载于:https://www.cnblogs.com/sandyLovingCoding/p/9703335.html