如何給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模態框的拖動，並且效果很是好。

 

 

 

 

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