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

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

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

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

用jsPlumb做流程圖的項(xiàng)目，有一項(xiàng)功能是要從左側(cè)的菜單欄拖動(dòng)項(xiàng)目到右側(cè)的面板上。參考了一些博客和demo，決定使用 jquery UI 中的 Draggable 和 Droppable 功能。

這里面遇到的問(wèn)題就是，如何在 vue 中引入 jquery UI

本地安裝 jquery 和 jquery UI

npm install jquery --save
npm install jquery-ui --save

配置 webpack.base.conf.js 文件

// 在開(kāi)頭引入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"
    }
  },
  // 增加一個(gè)plugins
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    })
  ],

在項(xiàng)目文件中，即需要引入jqueryUI的的地方import文件

這里面有個(gè)坑是，因?yàn)?em>jqueryUI中的resizable()方法需要引入jqueryUI的css文件，所以需要在根目錄的index.html中引入該文件


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

云服務(wù)器 GPU云服務(wù)器 Jquery拖拽 jquery ui JQuery?UI jquery拖拽上傳

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99727.html

相關(guān)文章

jsplumb+dragable+vue(一)

摘要：基于的，支持拖拽生成節(jié)點(diǎn)，節(jié)點(diǎn)雙擊展示更多信息，節(jié)點(diǎn)連線，刪除節(jié)點(diǎn)，刪除連線，重繪連接圖，當(dāng)前頁(yè)面刷新連接圖，根據(jù)畫(huà)連接圖等功能本章主要講拖拽生成節(jié)點(diǎn)獲取鏈接圖的信息引入需要的文件因?yàn)橐盟砸肓水?huà)連接圖用因?yàn)橛玫乃赃@樣引入拖基于vue的jsplumb，支持拖拽生成節(jié)點(diǎn)，節(jié)點(diǎn)雙擊展示更多信息，節(jié)點(diǎn)連線，刪除節(jié)點(diǎn)，刪除連線，重繪連接圖，當(dāng)前頁(yè)面刷新連接圖，根據(jù)json畫(huà)連接圖等功能...

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

摘要：基于的，支持拖拽生成節(jié)點(diǎn)，節(jié)點(diǎn)雙擊展示更多信息，節(jié)點(diǎn)連線，刪除節(jié)點(diǎn)，刪除連線，重繪連接圖，當(dāng)前頁(yè)面刷新連接圖，根據(jù)畫(huà)連接圖等功能本章主要講拖拽生成節(jié)點(diǎn)獲取鏈接圖的信息引入需要的文件因?yàn)橐盟砸肓水?huà)連接圖用因?yàn)橛玫乃赃@樣引入拖基于vue的jsplumb，支持拖拽生成節(jié)點(diǎn)，節(jié)點(diǎn)雙擊展示更多信息，節(jié)點(diǎn)連線，刪除節(jié)點(diǎn)，刪除連線，重繪連接圖，當(dāng)前頁(yè)面刷新連接圖，根據(jù)json畫(huà)連接圖等功能...

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

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

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

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

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

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

singerye 2019-08-29 13:23 評(píng)論0 收藏0