在vue專案中jsPlumb製作流程圖，拖拽複製使用 jquery 和 jquery UI

SinF發表於2019-02-16
VueJS流程圖jQueryUI

這是早期用jsPlumb做流程圖走的一個坑，使用jquery來製作流程圖，最近換成了用go.js來製作流程圖後，可以使用go.js中自帶的方法來製作拖拽效果，就不再使用jquery了。

用jsPlumb做流程圖的專案，有一項功能是要從左側的選單欄拖動專案到右側的皮膚上。參考了一些部落格和demo，決定使用 jquery UI 中的 Draggable 和 Droppable 功能。

這裡面遇到的問題就是，如何在 vue 中引入 jquery UI

  • 本地安裝 jquery 和 jquery UI
npm install jquery --save
npm install jquery-ui --save
  • 配置 webpack.base.conf.js 檔案
// 在開頭引入webpack，後面的plugins那裡需要
const webpack = require(`webpack`)
// ...
resolve: {
    extensions: [`.js`, `.vue`, `.json`],
    alias: {
      `vue$`: `vue/dist/vue.esm.js`,
      `@`: resolve(`src`),
      `jquery`: `jquery`,
      `jquery-ui`: `jquery-ui`
    }
  },
  // 增加一個plugins
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],
  • 在專案檔案中，即需要引入jqueryUI的的地方import檔案
<script type="text/ecmascript-6">
  import { jsPlumb } from `jsplumb`
  import $ from `jquery`
  // 需要注意的是，jquery-ui引入的時候，
  // 直接寫 import juqery-ui 沒有效果，只能直接寫到具體的方法
  // 好處是需要引用的也只有兩個  draggable  droppable
  import `jquery-ui/ui/widgets/draggable`
  import `jquery-ui/ui/widgets/droppable`
  import `jquery-ui/ui/widgets/resizable`

  export default {
    name: `flowedit`,
    mounted: function() {
      this.flowEdit()
    },
    methods: {
      flowEdit: function() {
        // 此處是等到jquery載入上再去執行jquery-ui
        $(document).ready(function() {
          $(`.item`).resizable()
        })
        jsPlumb.ready(function() {
          const common = {
            isSource: true,
            isTarget: true,
            endpoint: `Rectangle`,
          }
          jsPlumb.connect({
            source: `item_left`,
            target: `item_right`
          }, common)
          jsPlumb.draggable(`item_left`)
          jsPlumb.draggable(`item_right`)
        })
      }
    }
  }
</script>
  • 這裡面有個坑是，因為jqueryUI中的resizable()方法需要引入jqueryUI的css檔案，所以需要在根目錄的index.html中引入該檔案
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    // 此處引入了jquery UI的css檔案
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  </head>

相關文章