最近在做流程圖的項目精绎，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一些博客和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" >
</head>
