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

Integ 發布于2019-08-22 17:33 / 1252人閱讀

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

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

什么是 ngx-workspace?

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

和其他拖拽組件的不同

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

ngx-workspace有什么特點

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

例子

自定義拖動組件

改變組件模塊大小和位置

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

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

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

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

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

SpreadJS 純前端表格控件 V12.2 發布更新

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

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

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

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

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

sf190404 2019-08-19 18:44 評論0 收藏0
web前端學習方案

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

imccl 2019-08-29 17:01 評論0 收藏0
web前端學習方案

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

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