人心 2019-06-29
用jsPlumb做流程图的项目,有一项功能是要从左侧的菜单栏拖动项目到右侧的面板上。参考了一些博客和demo,决定使用 jquery UI 中的 Draggable 和 Droppable 功能。
这里面遇到的问题就是,如何在 vue 中引入 jquery UInpm install jquery --save npm install jquery-ui --save
// 在开头引入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" }) ],
<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>
<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>