在vue項目中jsPlumb製做流程圖，拖拽複製使用 jquery 和 jquery UI

時間 2019-11-10

標籤 vue 項目 jsplumb 製做流程圖複製使用 jquery 欄目系統架構简体版

原文原文鏈接

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

用jsPlumb作流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一些博客和demo，決定使用 jquery UI 中的 Draggable 和 Droppable 功能。css

這裏面遇到的問題就是，如何在 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>