前言:前段時間負(fù)責(zé)公司的運(yùn)營管理后臺項(xiàng)目,通過運(yùn)營后臺的PC端拖拽配置布局,達(dá)到App首頁模板的動態(tài)UI界面配置,生成頁面。趁著周末,整理一下當(dāng)時所了解到的拖拽。文章會根據(jù)大家的反饋或者自己學(xué)習(xí)經(jīng)驗(yàn)的累積成長不定期更新豐富。如果你想了解更多PC端的拖拽開發(fā),歡迎點(diǎn)贊關(guān)注或者收藏一波[鞠躬]。
之前在掘金一篇文章里看到這段話:
UI 開發(fā)的三種模式1.手寫標(biāo)簽和樣式代碼,生成頁面
2.可視化拖拽 UI 組建,生成頁面
3.直接輸入設(shè)計(jì)稿,輸出可用頁面
有幸當(dāng)前公司處于UI開發(fā)的第二階段
當(dāng)時開發(fā)參考過的小部分網(wǎng)站,其它參考過的大量網(wǎng)站由于電腦硬盤出現(xiàn)故障丟失了無法恢復(fù)。
以上網(wǎng)站這些不是很重要,真正重要有用的網(wǎng)站鏈接我已經(jīng)幫你篩選整理出來了,并貼在下面的文章里面(分為演示與教程兩類),點(diǎn)擊相關(guān)鏈接即可進(jìn)入相關(guān)開發(fā)學(xué)習(xí)。
貼上面網(wǎng)站的原因是我想告訴大家,插件選型之前一定要先整理好自己的需求,根據(jù)需求在網(wǎng)上尋找插件,并且打開控制臺,看看效果是不是你所需要的類型,否則下載到本地后調(diào)試了半天發(fā)現(xiàn)最后不能達(dá)到自己想要的效果,這樣既浪費(fèi)時間又浪費(fèi)精力,就得不償失了。所以,我之后有時間會整理一套插件選型篩選的思維導(dǎo)圖出來,到時發(fā)到掘金或者個人公眾號,大家一起分享進(jìn)步。
好了,言歸正傳,我們開始上主菜:
拖拽程度的層次就我搜索到的資料來看,拖拽的程度是分為三類的,如果你有知道的其它類型,歡迎與我交流分享。
1.視圖上的拖拽比如這個:
通過定位來改變順序,注意看控制臺的節(jié)點(diǎn)位置,并沒有發(fā)生對應(yīng)的改變。這種拖拽僅僅是視圖交互上的效果,也是最最簡單程度效果的拖拽。
鏈接:
JS-Demo演示地址
2.視圖與節(jié)點(diǎn)同步變化的拖拽 2-1 JQ-UI比如這個:
請注意看控制臺的節(jié)點(diǎn)位置,發(fā)生了對應(yīng)的改變。這種拖拽是能達(dá)到視圖與節(jié)點(diǎn)的同步變化的效果。
鏈接:
演示:JQ-UI-Demo演示地址
教程:JQ-UI中文API文檔教程
2-2 H5-draggable比如這個:
h5提供的draggable屬性,請注意看控制臺的節(jié)點(diǎn)位置,也發(fā)生了對應(yīng)的改變。
鏈接:
演示:Demo演示地址
教程:張鑫旭-draggable教程
2-3 JQ-UI與H5-draggable的取舍問題JQ-UI和H5-draggable屬性都能達(dá)到我們想要的效果,那我們應(yīng)該選擇哪個呢?個人而言,最后還是選擇了JQ-UI(當(dāng)然重構(gòu)我們改用了vue)。主要考慮的地方是靈活性,JQ-UI優(yōu)于H5-draggable屬性的地方正是在于靈活性。draggable屬性里面方法封裝的比JQ-UI相對而言比較固定,不好調(diào)整。所以,以我的經(jīng)驗(yàn)來看,如果你是簡簡簡單的小需求的拖拽,draggable的屬性絕對能夠滿足你;但如果你的拖拽需求比較復(fù)雜,那么我建議你用JQ-UI會比較好點(diǎn)。
3.數(shù)據(jù),視圖,節(jié)點(diǎn)的三者同步變化比如:這個
vue插件Vue-Draggable,也是vue相關(guān)拖拽插件中的star最多的,配置項(xiàng)也最豐富的。
鏈接:
演示:Demo演示地址
教程:github-vue-draggable
教程:github-vue-Sortable(draggable插件是基于sortabl二次封裝的,多看看這篇對使用draggable會有很大的幫助)
項(xiàng)目實(shí)踐重構(gòu)的時候我們是用vue的,選擇了這個draggable插件,后面事實(shí)證明也是正確的。"花了比用JQ至少少一半的時間就達(dá)到了相同的效果"。畢竟Vue只需要考慮數(shù)據(jù)關(guān)注業(yè)務(wù)流程而不需要考慮節(jié)點(diǎn)的操作問題,這點(diǎn)還是非常不錯的。反正誰用誰知道[吐舌]。好了,我們貼出代碼說明:
// 引入組件 import draggable from "vuedraggable" // 拖拽模塊箱子到 => 可整理的箱子/ 垃圾箱子
垃
圾
箱
clone是指復(fù)制,sort:false是指不使用排序。代碼中相關(guān)options屬性的配置說明你可以參考教程中的說明去對應(yīng)了解。我這里就不再重復(fù)贅述了。
一句話總結(jié)如果是簡單的拖拽,建議用H5的draggable屬性。
如果是復(fù)雜點(diǎn)的拖拽,建議用JQ-UI實(shí)現(xiàn)。
如果是數(shù)據(jù)驅(qū)動,用Vue-Draggable插件是很不錯的選擇。
一起交流?如果你有其它更好的想法想一起交流,請訂閱微信公眾號yhzg_gz(點(diǎn)擊復(fù)制,在微信中添加公眾號粘貼即可)與我聯(lián)系,追求代碼質(zhì)量,高效率編程是我們共同的目標(biāo)。
that"s all, 以上就是我目前所有的關(guān)于PC端項(xiàng)目拖拽經(jīng)驗(yàn)的總結(jié)。覺得對你開發(fā)有幫助的可以點(diǎn)贊收藏一波,如果我哪里寫錯了,希望能指點(diǎn)出來。如果你有更好的想法或者建議,可以提出來與我交流。大家一起進(jìn)步,共同成長。再次感謝[鞠躬]。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/92691.html
摘要:是一款在里可代替上傳和下載的程序。在中支持直接拖拽上傳的插件同時也支持和進(jìn)行命令上傳和下載。服務(wù)器上安裝插件上傳一個文件上傳可以直接拖動,上傳文件至當(dāng)前目錄。也可以用命令選擇需要上傳文件,一次可以指定多個文件。使用會彈出一個文件選擇框。 lrzsz是一款在linux里可代替ftp上傳和下載的程序。在linuxs...
摘要:內(nèi)容不可被拖動。指定一個元素拖動發(fā)生時顯示在光標(biāo)下方,三個參數(shù)分別是要顯示的元素和光標(biāo)在顯示元素中的坐標(biāo)。返回被拖放文件的對象。返回事件中傳遞的數(shù)據(jù)類型的類似數(shù)組的集合。 拖~ 在js里面關(guān)于拖這個概念是完全沒有的(except h5). 以前只能造一大堆的輪子,比如使用mousedown + mousemove + mouseup. 這3個事件結(jié)合起來實(shí)現(xiàn)復(fù)雜的UI操作。 現(xiàn)在,h5...
摘要:在初步完成了在線流程圖編輯工具之后又接到了在線搭建頁面工具的需求剛開始其實(shí)并不想接項(xiàng)目因?yàn)閺臍v史以及現(xiàn)實(shí)原因來看個性化及動態(tài)渲染都是很難解決的痛點(diǎn)各種頁面搭建工具的不溫不火早已說明了這條路并沒有這么好走但從另一個方面來說既然有了這樣的需求那 在初步完成了在線流程圖編輯工具之后,又接到了在線搭建頁面工具的需求,剛開始其實(shí)并不想接項(xiàng)目,因?yàn)閺臍v史以及現(xiàn)實(shí)原因來看,個性化及動態(tài)渲染都是很難解決的痛...
摘要:至于如何優(yōu)雅地管理使用,再次祭出潘神的文章手摸手,帶你優(yōu)雅的使用掘金項(xiàng)目的后端接口文檔我是用的進(jìn)行的管理,其實(shí)有很多強(qiáng)大的功能,不僅僅是一個接口測試工具,接口文檔管理就是其中一個。 首先放個線上地址大家感受一下(由于后端用的是 leancloud 的免費(fèi)套餐,因此可能會比較慢): vue-data-board P.S. 建議大家盡量自己注冊一個賬號(可以隨便填一個密碼),如果用默認(rèn)的測...
摘要:頁面布局是流程操作欄,工具箱流程組件,繪圖區(qū)。關(guān)于這部分可以了解一下的流程拖拽方法,這里推薦大神張鑫旭的文章有了流程的模塊,當(dāng)然還需要線路的指向。 目前有很多公司都有工作流的產(chǎn)品。關(guān)于工作流的架構(gòu)大致都是將工作流制定一個規(guī)范、標(biāo)準(zhǔn)數(shù)據(jù)模板,后臺程序再解析這些數(shù)據(jù)模板。一些公司的工作流是數(shù)據(jù)庫配置的,其實(shí)推薦將工作流可視化,這樣就會節(jié)省人力和物力來讀懂這些數(shù)據(jù)。關(guān)于流程可視化必然想到了在...
閱讀 902·2021-11-22 13:53
閱讀 2532·2021-10-15 09:40
閱讀 1000·2021-10-14 09:42
閱讀 3474·2021-09-22 15:59
閱讀 887·2021-09-02 09:47
閱讀 2366·2019-08-30 15:54
閱讀 1437·2019-08-29 17:14
閱讀 399·2019-08-29 15:15