最近在做流程图的项目，有一项功能是要从左侧的菜单栏拖动项目到右侧的面板上。参考了一些博客和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>
