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

marser 发布于2019-08-23 13:53 / 2815人阅读

摘要：用做流程图的项目，有一项功能是要从左侧的菜单栏拖动项目到右侧的面板上。参考了一些博客和，决定使用中的和功能。

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

这里面有个坑是，因为jqueryUI中的resizable()方法需要引入jqueryUI的css文件，所以需要在根目录的index.html中引入该文件


    
    
    
    // 此处引入了jquery UI的css文件

云服务器 GPU云服务器 Jquery拖拽 jquery ui JQuery?UI jquery拖拽上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99727.html

jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据画连接图等功能本章主要讲拖拽生成节点获取链接图的信息引入需要的文件因为要用所以引入了画连接图用因为用的所以这样引入拖基于vue的jsplumb，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据json画连接图等功能...

Imfan 2019-08-02 16:03 评论0 收藏0
jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据画连接图等功能本章主要讲拖拽生成节点获取链接图的信息引入需要的文件因为要用所以引入了画连接图用因为用的所以这样引入拖基于vue的jsplumb，支持拖拽生成节点，节点双击展示更多信息，节点连线，删除节点，删除连线，重绘连接图，当前页面刷新连接图，根据json画连接图等功能...

shadowbook 2019-08-23 11:43 评论0 收藏0
jsplumb--jquery流程图插件

摘要：流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批，流转等流程的制作页面，图中节点连线均由数据生成，图中节点可拖拽，可新增节点，点击保存后能够获得新的节点与连线的数据，便于保存到后台数据库。 jsPlumb流程图插件说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segmentfault...

shuibo 2019-08-01 17:35 评论0 收藏0
jsplumb--jquery流程图插件

摘要：流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批，流转等流程的制作页面，图中节点连线均由数据生成，图中节点可拖拽，可新增节点，点击保存后能够获得新的节点与连线的数据，便于保存到后台数据库。 jsPlumb流程图插件说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segmentfault...

qc1iu 2019-08-21 16:24 评论0 收藏0
jsplumb--jquery流程图插件

摘要：流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批，流转等流程的制作页面，图中节点连线均由数据生成，图中节点可拖拽，可新增节点，点击保存后能够获得新的节点与连线的数据，便于保存到后台数据库。 jsPlumb流程图插件说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segmentfault...

singerye 2019-08-29 13:23 评论0 收藏0