ngx-workspace Angular自定義可拖動模塊/組件大小和位置

Integ 發(fā)布于2019-08-22 17:33 / 1259人閱讀

摘要：用戶可以啟用編輯模式自定義組件大小和位置并保存。例子自定義拖動組件改變組件模塊大小和位置還有自適應(yīng)模式和固定位置，可以在中嘗試項目

經(jīng)歷了一個月項目升級，從angularjs1.4升級到angular6，決定把項目中的一個功能獨立出來。之前在npm上搜索關(guān)于拖拽的功能僅僅局限于從一個區(qū)域拖放到另一個區(qū)域，針對responsive的自定義拖拽頁面組件一個都沒找著，于是決定自己手動造輪子了。

什么是 ngx-workspace?

它基于12柵格設(shè)計風(fēng)格將頁面劃分為十二列，一個單位面積等于每一柵格中同等大小的正方形。開發(fā)者可導(dǎo)入自定義的組件并自定義組件大小和組件在頁面中的位置。用戶可以啟用編輯模式自定義組件大小和位置并保存。

和其他拖拽組件的不同

目前我在npm上找到的拖拽組件功能都屬于列表形式，將一個元素從一個表中拖放到另一個表中，或者改變元素排列順序。ngx-workspace的定義與這些組件不同，它集成化管理頁面中不同區(qū)域，可以讓用戶自定義頁面中每個區(qū)域和大小，并且可以讓用戶保存更改，使一個頁面具有高度可定制性。

ngx-workspace有什么特點

整個workspace可以設(shè)定為自適應(yīng)頁面或者固定大小，組件大小會隨著自適應(yīng)模式變化。

例子

自定義拖動組件

改變組件模塊大小和位置

還有自適應(yīng)模式和固定位置，可以在Demo中嘗試

項目Github: https://github.com/donle/ngx-...

云服務(wù)器 GPU云服務(wù)器自定義選擇組件可自定義大小 h5視頻播放器可自定義樣式保存拖動位置

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95286.html

相關(guān)文章

SpreadJS 純前端表格控件 V12.2 發(fā)布更新

摘要：用不到行代碼，在前端實現(xiàn)的全部功能千萬前端開發(fā)者翹首企盼，終發(fā)布更新六大功能特性，帶來更多便利，用不到行代碼，在前端實現(xiàn)的全部功能是一款基于的純前端電子表格控件，以高速低耗高度類似可無限擴展為產(chǎn)品特色，提供移動跨平臺和瀏覽器支持，同時滿足等用不到100行代碼，在前端實現(xiàn)Excel的全部功能千萬前端開發(fā)者翹首企盼，SpreadJS V12.2 終發(fā)布更新：六大功能特性，帶來更多便利，...

FrozenMap 2019-08-26 10:45 評論0 收藏0
echarts使用總結(jié)

摘要：最近一段時間做了一個使用的圖表項目。由于理解能力有限，使用起來并非暢通無阻。所謂好記性不如爛筆頭，現(xiàn)將一些比較關(guān)鍵的點記錄一下，供后續(xù)查看。最近一段時間做了一個使用echarts的圖表項目。由于理解API能力有限，使用起來并非暢通無阻。所謂好記性不如爛筆頭，現(xiàn)將一些比較關(guān)鍵的點記錄一下，供后續(xù)查看。一使用方法項目：ionic+angular4+echarts 1.由于打包原因，...

spademan 2019-08-23 11:54 評論0 收藏0
AngularJs

摘要：當左右服務(wù)都被解析并返回時，會以服務(wù)為參數(shù)去調(diào)用組件的構(gòu)造函數(shù)。發(fā)送或廣播的消息應(yīng)該限定在最小的作用域。置頂一個通過，發(fā)送的消息列表并且窒息的管理以防止命名沖突在需要格式化數(shù)據(jù)時，將格式 angular 數(shù)據(jù)雙向綁定的框架提供數(shù)據(jù)綁定，DOM指令。angular，定義了一套規(guī)則，開發(fā)中就必須遵守規(guī)則，這套規(guī)則為項目提供了一套解決方案。模塊，組件，模板，元數(shù)據(jù)，數(shù)據(jù)綁定, 指令，服務(wù)...

sf190404 2019-08-19 18:44 評論0 收藏0
web前端學(xué)習(xí)方案

摘要：學(xué)習(xí)計劃認識語義化的意義。這意味著可以在編程語言中很方便地表達靜態(tài)或動態(tài)的數(shù)據(jù)流，而相關(guān)的計算模型會自動將變化的值通過數(shù)據(jù)流進行傳播。熟悉，理解響應(yīng)式編程思想在根據(jù)官方文檔學(xué)習(xí)的時候請優(yōu)先理解它的思想。學(xué)習(xí)計劃 HTML5 認識HTML5語義化的意義。熟悉HTML5新特性了解如何快速的加載HTML頁面，以及完善用戶體驗如：閱讀模式、無障礙設(shè)置，了解Canvas、Svg CS...

imccl 2019-08-29 17:01 評論0 收藏0
web前端學(xué)習(xí)方案

摘要：學(xué)習(xí)計劃認識語義化的意義。這意味著可以在編程語言中很方便地表達靜態(tài)或動態(tài)的數(shù)據(jù)流，而相關(guān)的計算模型會自動將變化的值通過數(shù)據(jù)流進行傳播。熟悉，理解響應(yīng)式編程思想在根據(jù)官方文檔學(xué)習(xí)的時候請優(yōu)先理解它的思想。學(xué)習(xí)計劃 HTML5 認識HTML5語義化的意義。熟悉HTML5新特性了解如何快速的加載HTML頁面，以及完善用戶體驗如：閱讀模式、無障礙設(shè)置，了解Canvas、Svg CS...

mylxsw 2019-08-02 11:45 評論0 收藏0