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

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

轉載于:https://www.cnblogs.com/sifo/p/9910064.html