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>