一：创建drag.directive.ts

代码如下:

import { Directive, ElementRef, Input,OnInit,Renderer,HostListener} from '@angular/core';

@Directive({ selector: '[myDrag]' })

//封装一个拖拽指令

export class HighlightDirective  implements OnInit {

    constructor(private el: ElementRef,private rr:Renderer) {

    }

    //控制是否按下

    //设置为private，放置外部改变内部数据

    private isDown=false;

    private disX ;

    private disY ;

    ngOnInit(){

    this.setColor(this.dragColor);

    }

   //点击事件

@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属性

//绑定到@Input别名

//在指令内部，该属性叫dragColor，在外部，当我们绑定到它时，它叫myDrag。

    @Input('myDrag') dragColor: string;

}

二:在根模块引入指令

例如:

//注册指令--->用法类似于组件

import {HighlightDirective} from '../directive/drag.directive';

//列出程序中的组件

  declarations: [

    AppComponent,

    GeneralDetailComponent,

    HighlightDirective

  ],

三:使用

<div   [myDrag]="color" >