如何給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模態框的拖動，而且效果非常好。

 

 

 

 

文章由本人親自整理，絕對原創，轉載請說明。如有問題也請大家多多包涵