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

写在前面的话：

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模态框的拖动，并且效果很是好。

 

 

 

 

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