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>