在vue项目中jsPlumb制作流程图，拖拽复制使用 jquery 和 jquery UI

人心

2019-06-29

这是早期用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>

jsplumb jquery vue 流程图 webpack