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

marser 發(fā)布于2019-08-23 13:53 / 2854人閱讀

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

這是早期用jsPlumb做流程圖走的一個坑，使用jquery來制作流程圖，最近換成了用go.js來制作流程圖后，可以使用go.js中自帶的方法來制作拖拽效果，就不再使用jquery了。

用jsPlumb做流程圖的項目，有一項功能是要從左側(cè)的菜單欄拖動項目到右側(cè)的面板上。參考了一些博客和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云服務(wù)器云服務(wù)器 Jquery拖拽 jquery ui JQuery?UI jquery拖拽上傳

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99727.html

相關(guān)文章

jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成節(jié)點，節(jié)點雙擊展示更多信息，節(jié)點連線，刪除節(jié)點，刪除連線，重繪連接圖，當(dāng)前頁面刷新連接圖，根據(jù)畫連接圖等功能本章主要講拖拽生成節(jié)點獲取鏈接圖的信息引入需要的文件因為要用所以引入了畫連接圖用因為用的所以這樣引入拖基于vue的jsplumb，支持拖拽生成節(jié)點，節(jié)點雙擊展示更多信息，節(jié)點連線，刪除節(jié)點，刪除連線，重繪連接圖，當(dāng)前頁面刷新連接圖，根據(jù)json畫連接圖等功能...

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

摘要：基于的，支持拖拽生成節(jié)點，節(jié)點雙擊展示更多信息，節(jié)點連線，刪除節(jié)點，刪除連線，重繪連接圖，當(dāng)前頁面刷新連接圖，根據(jù)畫連接圖等功能本章主要講拖拽生成節(jié)點獲取鏈接圖的信息引入需要的文件因為要用所以引入了畫連接圖用因為用的所以這樣引入拖基于vue的jsplumb，支持拖拽生成節(jié)點，節(jié)點雙擊展示更多信息，節(jié)點連線，刪除節(jié)點，刪除連線，重繪連接圖，當(dāng)前頁面刷新連接圖，根據(jù)json畫連接圖等功能...

shadowbook 2019-08-23 11:43 評論0 收藏0
jsplumb--jquery流程圖插件

摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場景審批，流轉(zhuǎn)等流程的制作頁面，圖中節(jié)點連線均由數(shù)據(jù)生成，圖中節(jié)點可拖拽，可新增節(jié)點，點擊保存后能夠獲得新的節(jié)點與連線的數(shù)據(jù)，便于保存到后臺數(shù)據(jù)庫。 jsPlumb流程圖插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault...

shuibo 2019-08-01 17:35 評論0 收藏0
jsplumb--jquery流程圖插件

摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場景審批，流轉(zhuǎn)等流程的制作頁面，圖中節(jié)點連線均由數(shù)據(jù)生成，圖中節(jié)點可拖拽，可新增節(jié)點，點擊保存后能夠獲得新的節(jié)點與連線的數(shù)據(jù)，便于保存到后臺數(shù)據(jù)庫。 jsPlumb流程圖插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault...

qc1iu 2019-08-21 16:24 評論0 收藏0
jsplumb--jquery流程圖插件

摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場景審批，流轉(zhuǎn)等流程的制作頁面，圖中節(jié)點連線均由數(shù)據(jù)生成，圖中節(jié)點可拖拽，可新增節(jié)點，點擊保存后能夠獲得新的節(jié)點與連線的數(shù)據(jù)，便于保存到后臺數(shù)據(jù)庫。 jsPlumb流程圖插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault...

singerye 2019-08-29 13:23 評論0 收藏0