angular2-draggable拖动,angular2窗口拖动插件

发布时间:2019-06-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angular2-draggable拖动,angular2窗口拖动插件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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>

脚本宝典总结

以上是脚本宝典为你收集整理的angular2-draggable拖动,angular2窗口拖动插件全部内容,希望文章能够帮你解决angular2-draggable拖动,angular2窗口拖动插件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。