angular2-draggable拖動，angular2窗口拖動插件

一、安裝插件

npm install angular2-draggable --save

二、配置model

...
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AngularDraggableModule
    ],
...

三、html界面中使用

<div ngDraggable class="card">
  <div class="card-block">拖動內容</div>
</div>

四、指定內容中哪些元素上能夠拖動整個窗口，使用[handle]指定元素id

<div ngDraggable class="card" [handle]="dragHtml">
  <div #dragHtml class="card-header">這裏能夠拖動窗口</div>
  <div class="card-block">這裏不能拖動窗口</div>
</div>

五、改變拖動內容的鼠標樣式css

.card-header {
        cursor: move;
    }

六、拖動事件，開始拖動和結束拖動事件。

<div ngDraggable (started)="onDragBegin($event)" (stopped)="onDragEnd($event)">Drag me!</div>