在vue項目中jsPlumb制作流程圖，拖拽復制使用 jquery 和 jquery UI

marser 發布于2019-08-23 13:53 / 2849人閱讀

摘要：用做流程圖的項目，有一項功能是要從左側的菜單欄拖動項目到右側的面板上。參考了一些博客和，決定使用中的和功能。

這是早期用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拖拽上傳

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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