1、安装插件
npm install angular2-draggable --save
2、配置model
... @NgModule({ declarations: [ AppComponent ],imports: [ AngularDraggableModule ],...
3、html界面中使用
<div ngDraggable class="card"> <div class="card-block">拖动内容</div> </div>
4、指定内容中哪些元素上可以拖动整个窗口,使用[handle]指定元素id
<div ngDraggable class="card" [handle]="dragHtml"> <div #dragHtml class="card-header">这里可以拖动窗口</div> <div class="card-block">这里不能拖动窗口</div> </div>
5、改变拖动内容的鼠标样式css
.card-header { cursor: move; }
6、拖动事件,开始拖动和结束拖动事件。
<div ngDraggable (started)="onDragBegin($event)" (stopped)="onDragEnd($event)">Drag me!</div>