国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

可視化拖拽 UI 布局之拖拽篇

ACb0y / 647人閱讀 

前言：前段時間負責公司的運營管理后臺項目，通過運營后臺的PC端拖拽配置布局，達到App首頁模板的動態UI界面配置，生成頁面。趁著周末，整理一下當時所了解到的拖拽。文章會根據大家的反饋或者自己學習經驗的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發，歡迎點贊關注或者收藏一波[鞠躬]。

之前在掘金一篇文章里看到這段話:

UI 開發的三種模式 
1.手寫標簽和樣式代碼，生成頁面


2.可視化拖拽 UI 組建，生成頁面


3.直接輸入設計稿，輸出可用頁面

有幸當前公司處于UI開發的第二階段

當時開發參考過的小部分網站，其它參考過的大量網站由于電腦硬盤出現故障丟失了無法恢復。

以上網站這些不是很重要，真正重要有用的網站鏈接我已經幫你篩選整理出來了，并貼在下面的文章里面(分為演示與教程兩類)，點擊相關鏈接即可進入相關開發學習。

貼上面網站的原因是我想告訴大家，插件選型之前一定要先整理好自己的需求，根據需求在網上尋找插件，并且打開控制臺，看看效果是不是你所需要的類型，否則下載到本地后調試了半天發現最后不能達到自己想要的效果，這樣既浪費時間又浪費精力，就得不償失了。所以，我之后有時間會整理一套插件選型篩選的思維導圖出來，到時發到掘金或者個人公眾號，大家一起分享進步。

好了，言歸正傳，我們開始上主菜：

拖拽程度的層次

就我搜索到的資料來看，拖拽的程度是分為三類的，如果你有知道的其它類型，歡迎與我交流分享。

1.視圖上的拖拽

比如這個：

通過定位來改變順序，注意看控制臺的節點位置，并沒有發生對應的改變。這種拖拽僅僅是視圖交互上的效果，也是最最簡單程度效果的拖拽。

鏈接：

JS-Demo演示地址

2.視圖與節點同步變化的拖拽 2-1 JQ-UI

比如這個：

請注意看控制臺的節點位置，發生了對應的改變。這種拖拽是能達到視圖與節點的同步變化的效果。

鏈接：

演示：JQ-UI-Demo演示地址

教程：JQ-UI中文API文檔教程

2-2 H5-draggable

比如這個：

h5提供的draggable屬性，請注意看控制臺的節點位置，也發生了對應的改變。

鏈接：

演示：Demo演示地址

教程：張鑫旭-draggable教程

2-3 JQ-UI與H5-draggable的取舍問題

JQ-UI和H5-draggable屬性都能達到我們想要的效果，那我們應該選擇哪個呢？個人而言，最后還是選擇了JQ-UI(當然重構我們改用了vue)。主要考慮的地方是靈活性，JQ-UI優于H5-draggable屬性的地方正是在于靈活性。draggable屬性里面方法封裝的比JQ-UI相對而言比較固定，不好調整。所以，以我的經驗來看，如果你是簡簡簡單的小需求的拖拽，draggable的屬性絕對能夠滿足你；但如果你的拖拽需求比較復雜，那么我建議你用JQ-UI會比較好點。

3.數據，視圖，節點的三者同步變化

比如：這個

vue插件Vue-Draggable，也是vue相關拖拽插件中的star最多的，配置項也最豐富的。

鏈接:

演示：Demo演示地址

教程：github-vue-draggable

教程：github-vue-Sortable(draggable插件是基于sortabl二次封裝的，多看看這篇對使用draggable會有很大的幫助)

項目實踐

重構的時候我們是用vue的，選擇了這個draggable插件，后面事實證明也是正確的。"花了比用JQ至少少一半的時間就達到了相同的效果"。畢竟Vue只需要考慮數據關注業務流程而不需要考慮節點的操作問題，這點還是非常不錯的。反正誰用誰知道[吐舌]。好了，我們貼出代碼說明：

// 引入組件
import draggable from "vuedraggable"

// 拖拽模塊箱子到 => 可整理的箱子/ 垃圾箱子



  
    
    
  





  
垃
圾
箱

clone是指復制，sort：false是指不使用排序。代碼中相關options屬性的配置說明你可以參考教程中的說明去對應了解。我這里就不再重復贅述了。

一句話總結

如果是簡單的拖拽，建議用H5的draggable屬性。

如果是復雜點的拖拽，建議用JQ-UI實現。

如果是數據驅動，用Vue-Draggable插件是很不錯的選擇。

一起交流?

如果你有其它更好的想法想一起交流，請訂閱微信公眾號yhzg_gz(點擊復制，在微信中添加公眾號粘貼即可)與我聯系，追求代碼質量，高效率編程是我們共同的目標。

that"s all, 以上就是我目前所有的關于PC端項目拖拽經驗的總結。覺得對你開發有幫助的可以點贊收藏一波，如果我哪里寫錯了，希望能指點出來。如果你有更好的想法或者建議，可以提出來與我交流。大家一起進步，共同成長。再次感謝[鞠躬]。

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92691.html

相關文章

  • linux之拖拽上傳文件

    摘要：是一款在里可代替上傳和下載的程序。在中支持直接拖拽上傳的插件同時也支持和進行命令上傳和下載。服務器上安裝插件上傳一個文件上傳可以直接拖動，上傳文件至當前目錄。也可以用命令選擇需要上傳文件，一次可以指定多個文件。使用會彈出一個文件選擇框。 lrzsz是一款在linux里可代替ftp上傳和下載的程序。在linuxs...

    microcosm1994 評論0 收藏0

  • 拖動中的味道

    摘要：內容不可被拖動。指定一個元素拖動發生時顯示在光標下方，三個參數分別是要顯示的元素和光標在顯示元素中的坐標。返回被拖放文件的對象。返回事件中傳遞的數據類型的類似數組的集合。 拖~ 在js里面關于拖這個概念是完全沒有的(except h5). 以前只能造一大堆的輪子，比如使用mousedown + mousemove + mouseup. 這3個事件結合起來實現復雜的UI操作。 現在，h5...

    468122151 評論0 收藏0

  • 頁面搭建工具總結及架構思考

    摘要：在初步完成了在線流程圖編輯工具之后又接到了在線搭建頁面工具的需求剛開始其實并不想接項目因為從歷史以及現實原因來看個性化及動態渲染都是很難解決的痛點各種頁面搭建工具的不溫不火早已說明了這條路并沒有這么好走但從另一個方面來說既然有了這樣的需求那 在初步完成了在線流程圖編輯工具之后,又接到了在線搭建頁面工具的需求,剛開始其實并不想接項目,因為從歷史以及現實原因來看,個性化及動態渲染都是很難解決的痛...

    William_Sang 評論0 收藏0

  • 觀眾老爺們，來試試這個用 Vue 擼的數據可視化后臺吧

    摘要：至于如何優雅地管理使用，再次祭出潘神的文章手摸手，帶你優雅的使用掘金項目的后端接口文檔我是用的進行的管理，其實有很多強大的功能，不僅僅是一個接口測試工具，接口文檔管理就是其中一個。 首先放個線上地址大家感受一下(由于后端用的是 leancloud 的免費套餐，因此可能會比較慢)： vue-data-board P.S. 建議大家盡量自己注冊一個賬號(可以隨便填一個密碼)，如果用默認的測...

    JinB 評論0 收藏0

  • ES6流程拖拽實現思路

    摘要：頁面布局是流程操作欄，工具箱流程組件，繪圖區。關于這部分可以了解一下的流程拖拽方法，這里推薦大神張鑫旭的文章有了流程的模塊，當然還需要線路的指向。 目前有很多公司都有工作流的產品。關于工作流的架構大致都是將工作流制定一個規范、標準數據模板，后臺程序再解析這些數據模板。一些公司的工作流是數據庫配置的，其實推薦將工作流可視化，這樣就會節省人力和物力來讀懂這些數據。關于流程可視化必然想到了在...

    myshell 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<