Angular2封装拖拽指令

一：创建drag.directive.ts
代码如下:

/*
1.Directive提供@Directive装饰器功能。

2.ElementRef注入到指令构造函数中。这样代码就可以访问 DOM 元素了。

3.Input将数据从绑定表达式传达到指令中。
*/
import { Directive, ElementRef, Input,OnInit,Renderer,HostListener} from '@angular/core';

/*
@Directive装饰器函数以配置对象参数的形式，包含了指令的元数据。

@Directive装饰器需要一个 CSS 选择器，以便从模板中识别出关联到这个指令的 HTML。
*/
@Directive({ selector: '[myDrag]' })

//封装一个拖拽指令
export class HighlightDirective implements OnInit {
/*

ElementRef是一个服务，它赋予我们通过它的nativeElement属性直接访问 "DOM 元素"的能力

。 Renderer服务允许通过代码设置"元素的样式"。
*/
constructor(private el: ElementRef,private rr:Renderer) {

}

//控制是否按下
//设置为private，放置外部改变内部数据
private isDown=false;
private disX ;
private disY ;

ngOnInit(){
this.setColor(this.dragColor);
}

/*
@HostListener装饰器引用属性型指令的宿主元素
当然，你可以通过标准的JavaScript方式手动给宿主 DOM 元素附加一个事件监听器。 但这种方法至少有三个问题：

1.必须正确的书写事件监听器。
2.当指令被销毁的时候，必须拆卸事件监听器，否则会导致内存泄露。
3.必须直接和 DOM API 打交道，应该避免"这样做"。
@HostListener的this的指向很重要
*/
//点击事件
@HostListener('mousedown',['$event']) onMousedown(event) {
console.log(event);
this.isDown=true;
this.disX=event.clientX-this.el.nativeElement.offsetLeft;
this.disY=event.clientY-this.el.nativeElement.offsetTop;

}
//监听document移动事件事件
@HostListener('document:mousemove', ['$event']) onMousemove(event){
//判断该元素是否被点击了。
if(this.isDown){
console.log("移动中");
let newdisX=event.clientX;
let newdisY=event.clientY;
this.el.nativeElement.style.left=newdisX-this.disX+"px";
this.el.nativeElement.style.top=newdisY-this.disY+"px";
}

}
//监听document离开事件
@HostListener('document:mouseup',['$event']) onMouseup() {
//只用当元素移动过了，离开函数体才会触发。
if(this.isDown){
console.log("fail");
this.isDown=false;
}

}

private setColor(color){
this.el.nativeElement.style.background=color;
}

/*
使用数据绑定向指令传递值
注意看@Input装饰器。它往类上添加了一些元数据，从而让该指令的highlightColor能用于绑定。

它之所以称为输入属性，是因为数据流是从绑定表达式流向指令内部的。 如果没有这个元数据，Angular就会拒绝绑定，
*/
// 绑定到@Input属性
//绑定到@Input别名
//在指令内部，该属性叫dragColor，在外部，当我们绑定到它时，它叫myDrag。
@Input('myDrag') dragColor: string;
}
二:在根模块引入指令
例如:

//注册指令--->用法类似于组件
import {HighlightDirective} from '../directive/drag.directive';
//列出程序中的组件
declarations: [
AppComponent,
GeneralDetailComponent,
HighlightDirective
],
三:使用
<div [myDrag]="color" style="height:200px;width:200px;position: absolute;">