如何给iview 的模态框增加拖拽功能

最新推荐文章于 2023-06-07 11:27:10 发布

weixin_30596023

最新推荐文章于 2023-06-07 11:27:10 发布

阅读量1.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sifo/p/9910064.html

版权

写在前面的话：

iview 3.0已经发布了，在模态框组件中，相比2.0版本，已经支持了模态框拖拽的功能。

当然2.0版本还是不支持，那如何才能支持呢？

这里我们引用jquery-ui.js的拖拽功能。如果项目是用的vue-cli框架搭建的，可以在static文件夹下直接放置一个jquery-ui的版本（也可以使用cdn:https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js)。

然后在最外层的index.html中引入jquery-ui的脚本，最好再前面引一下jquery，不然会报jQuery未定义。引完了以后，只需要简单调用一下就行。

iview 的模态框在页面上的dom元素为“ivu-modal”。所以我们只需要在页面上加上

<script>
      $(function(){
        $(".ivu-modal").draggable(); //使用jqueryui中的拖拽实现模态框的拖动
      })
</script>

就可以直接运行。当然也可以在main.js中通过import的方式引入一个jquery-ui的脚本。然后通过vue的方式调用，在这里就不详细展开了。用这种方式可以实现iview模态框的拖动，而且效果非常好。

文章由本人亲自整理，绝对原创，转载请说明。如有问题也请大家多多包涵

转载于:https://www.cnblogs.com/sifo/p/9910064.html

关注