84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
可能標題描述的不太清楚,還是直接上效果圖說
##如上效果圖所示，可以自己編輯配置參數，然後可預覽，每個模組還可以拖曳，想問一下這種技術是怎麼實現的？
光阴似箭催人老，日月如移越少年。
這麼簡單說，給你一個p，要求根據一個輸入框的值修改它的寬，這個不難實現吧。
當你實現完這個，就慢慢加上可以修改高、位置、可拖曳、可刪除、可新增等功能，其他的元素也類似。
如果你物件導向還熟的話，也就是一個對象，有各種屬性。透過輸入框，拖曳等方式修改屬性的過程。
DIY的頁面，本質其實所有的可能性的頁面都已經寫好了，你只是修改參數而已
舉個簡單的栗子
評論沒有回答的時候是空的
有評論的時候就會出現一個評論框，有幾則評論就顯示幾條評論框
只不過區別在於，一個是透過評論數確定，一個是透過你選取的參數決定，包括修改p大小顏色，也只不過是把你的參數保存起來，透過對應的js轉換成你看到的效果
理應由一套json資料配置的頁面範本(例如:配置頁面內的圖片,圖片寬高,縮放比例以及自訂屬性等等),頁面類型就對應不同的json資料,這樣做靈活且可擴展性高
其實其他答主回答的很好了，但可能對題主來說太抽象了。我就再簡單說下DIY頁面的思路吧：
你可以把這個頁面想像成由很多積木拼裝而成，這個積木我們在開發中稱為組件。
每個元件都可以抽象化成一個對象，它的dom結構、css樣式和對應的js都是寫好了的。一般會有一個資料物件（例如json）來保存這些自訂配置參數，以便在你操作元件時進行對應的資料讀寫。
當你加入元件時，js就會去讀取配置數據，然後產生對應的dom結構並渲染到html裡，你就能預覽到效果了。
PS：如果題主想實現類似功能的話，建議先實現其中的一個組件，然後擴展可配置組件的參數...
能讀代碼，直接f12唸代碼唄
這麼簡單說，給你一個p，要求根據一個輸入框的值修改它的寬，這個不難實現吧。
當你實現完這個，就慢慢加上可以修改高、位置、可拖曳、可刪除、可新增等功能，其他的元素也類似。
如果你物件導向還熟的話，也就是一個對象，有各種屬性。透過輸入框，拖曳等方式修改屬性的過程。
舉個簡單的栗子
評論沒有回答的時候是空的
有評論的時候就會出現一個評論框，有幾則評論就顯示幾條評論框
只不過區別在於，一個是透過評論數確定，一個是透過你選取的參數決定，包括修改p大小顏色，也只不過是把你的參數保存起來，透過對應的js轉換成你看到的效果
理應由一套json資料配置的頁面範本(例如:配置頁面內的圖片,圖片寬高,縮放比例以及自訂屬性等等),頁面類型就對應不同的json資料,這樣做靈活且可擴展性高
其實其他答主回答的很好了，但可能對題主來說太抽象了。我就再簡單說下DIY頁面的思路吧：
你可以把這個頁面想像成由很多積木拼裝而成，這個積木我們在開發中稱為組件。
每個元件都可以抽象化成一個對象，它的dom結構、css樣式和對應的js都是寫好了的。一般會有一個資料物件（例如json）來保存這些自訂配置參數，以便在你操作元件時進行對應的資料讀寫。
當你加入元件時，js就會去讀取配置數據，然後產生對應的dom結構並渲染到html裡，你就能預覽到效果了。
PS：如果題主想實現類似功能的話，建議先實現其中的一個組件，然後擴展可配置組件的參數...
能讀代碼，直接f12唸代碼唄