灵活可配置可拖拽的栅格布局 angular-gridster2

已于 2022-05-12 20:28:41 修改
阅读量1.1k 收藏
点赞数
分类专栏： Angular 文章标签： angular 前端
于 2022-05-12 20:25:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kate_sicheng/article/details/124738879
版权

最近认识了一个新组件，跟大家分享一下：angular-gridster2。

它是一个功能强大的，支持动态配置，支持拖拽改变卡片大小，支持拖拽变更页面布局的网格布局组件。
在这里插入图片描述

https://www.npmjs.com/package/angular-gridster2

江小虫儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
angular-gridster2：Angular gridster 2
02-06
角网格2 Angular-gridsterAngular实现 需要Angular 11.x 对于其他Angular版本，请检查其他分支。 安装 npm install angular-gridster2 --save 应该与webpack开箱即用，分别是angular-cli。 import { GridsterModule } from 'angular-gridster2' ; @ NgModule ( { imports : [ GridsterModule ] , ... } ) 浏览器支持 Angular支持什么 如何使用 < gridster [options] ="
探索Angular Gridster：构建响应式布局的新选择
gitblog_00095的博客
04-10 300
探索Angular Gridster：构建响应式布局的新选择 项目地址:https://gitcode.com/ManifestWebDesign/angular-gridster 在现代网页开发中，灵活和动态的布局系统是必不可少的。Angular Gridster是一个强大的开源库，专为Angular开发者设计，用于创建可自定义、响应式的网格布局。通过GitCode仓库，您可以轻松获取并开始使用...
推荐一个很棒的开源项目 - Gridster.js
gitblog_00096的博客
03-17 304
推荐一个很棒的开源项目 - Gridster.js Gridster.js 是一款基于 jQuery 的响应式栅格布局系统，它允许您轻松地创建可拖动、可调整大小的元素，非常适合用于仪表板和其他需要灵活布局的应用程序。 Gridster.js 能用来做什么？ Gridster.js 可以用来构建各种类型的仪表板，例如监控应用程序的状态、展示数据可视化图表等。它也可以用于任何需要灵活网格布局的应用程序...
angular-gridster2
m0_68844315的博客
04-10 349
import { MatSelectModule } from '@angular/material/select';
标题：利用Angular-gridster2构建响应式布局的完美工具
最新发布
gitblog_00053的博客
05-14 399
标题：利用Angular-gridster2构建响应式布局的完美工具 项目地址:https://gitcode.com/tiberiuzuld/angular-gridster2 项目介绍 Angular-gridster2 是一个专门为Angular 17.x版本设计的强大开源库，它实现了灵活的网格布局系统。这个库提供了一个简单易用的组件，帮助开发者轻松创建自适应和可拖动的网格布局，适用于各种各...
angular-dynamic-responsive-gridster:一个具有响应式网格布局和动态 json 加载的 AngularJs 项目
06-07
角度动态响应网格 一个具有响应式网格布局和动态 json 加载的 AngularJs 项目 ＃安装 凉亭安装 如何使用 在 IDE 上设置源代码 启动 index.html 并尝试示例布局 如何配置新布局 创建一个新的 json 文件并将其命名为 N.json（其中 N 是一个数字）。 这里的JSON结构： { "layout" : [ { ... grid_items . . . } , ] , "options" : { ... grid_options . . . } } grid_item 属性 姓名 | 类型 | 说明--------------| ----------------|--------------------------------- ---------------------------------- col | 数量 |
使用angular-ui-sortable实现可拖拽排序列表
热门推荐
justforuse的博客
10-12 1万+
项目需求，添加列表可拖拽排序功能，谷歌了一下，找到一个Angular的插件：angular-ui-sortable，项目地址：https://github.com/angular-ui/ui-sortable需要在之前引入jquery，和jquery-ui，否则无法使用。我们要做的事情，加载数据，拖拽排序并输出当前顺序：js代码：<script src="../../jquery.js"></scr
Angular 表格内单个单元格内单个元素的拖拽功能实现（单个单元格的拖拽实现也大致相同）
qq_43730595的博客
12-24 1145
Angular 拖拽功能应用到表格当中的实现方式
动图展示 60+ 个前端常用插件库合集
qq_27169469的博客
07-06 410
DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。 LazyLoad 官网：Lazy Load 延伸：Vanilla JavaScript Lazy Load Plugin Lazy Load帮助高度较长的网页进行延迟载入图片，尚未浏览到该部分时，不会载入视角外的图片，提高效率。 lightSlider 官网：
基于ngx-echarts和angular-gridster2 做的基于dashboard例子
wen_binobject的博客
05-14 4517
配置相关看下面的链接 https://xieziyu.github.io/ngx-echarts/api-doc/index.html api关于ngx-echarts https://xieziyu.github.io/ngx-echarts/#/demo/map/hongkong-pd demo关于ngx-echarts https://github.com/tiberiuzuld/a...
angular2gridster：众所周知的Gridster的Angular实现（没有jQuery，没有外部库，只有Angular和Rx.js）
01-29
angular2gridster 众所周知的Gridster的Angular实现（没有jQuery，没有外部库，只有Angular和Rx.js）。 提供了更全面的文档。 可以在和跟踪开发进度。 版本： 版本9.x可与Angular 9.x一起使用。 版本8.x可与Angular 8.x一起使用。 版本7.x可与Angular 7.x一起使用。 6.x版可与Angular 6.x一起使用。 版本5.x可与Angular 5.x一起使用。 版本4.x可与Angular 4.x一起使用。 版本1.x和0.x仅适用于Angular 4.x ，但您可以在v4.x中找到最新状态。 安装 npm install angular2gridster 安装完成后，您需要导入我们的模块： ... import { GridsterModule } from 'angular2gridster' ; @ NgModule ( { declarations : [ AppComponent ] , imports : [ ... GridsterModu
Angular-angular2gridster.zip
09-18
Angular-angular2gridster.zip,著名gridster的角度实现（没有jquery，没有外部库，只有angular和rx.js）。,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
angular-drag-resize:可拖动元素和可调整大小元素的Angular指令
05-01
角度拖曳调整大小 用于拖动和调整元素大小的Angular.js指令。 演示版 动机 drag指令是从有角度的文档中获取的（ ），不幸的是，它破坏了css resize属性。 在此包中找到的resize指令允许可拖动元素也被调整大小。 安装 下载仓库，包括： [removed][removed] 通过凉亭： $ bower install angular-drag-resize 通过npm： $ npm install angular-drag-resize 通过纱： $ yarn add angular-drag-resize 用法 将angular.drag.resize注入您的应用程序： angular.module('myApp', ['angular.drag.resize']); 然后向元素添加
angular-gridster
01-08
gridster的ng-1版本；可以用来进行元素的拖动和排版显示
angular-grid-layout:响应式网格，带有可拖动和可调整大小的项目，用于Angular应用程序
03-06
带有可拖动项目和可调整大小项目的网格，用于Angular应用程序。 高度可定制的仪表板非常适合。 它的核心功能基于众所周知的库。 可以将其视为Angular生态系统的“端口”（经过一些更改）。 两者涵盖了相同的必需品...
适用于仪表盘项目的 7 个优秀 JavaScript 库
weixin_34400525的博客
04-05 441
2019独角兽企业重金招聘Python工程师标准>>> ...
angular1、angular2的区别
忘川
08-17 2329
1、编程语言的不同。angular1.x是JavaScript，可以直接在浏览器中运行，而angular2是TypeScript,只有经过编译后才能在浏览器中运行，所以它必须使用构建工具。 2、控制器Controller的改变。在1 中它是非常重要的，用于封装视图控制逻辑，而2中这个，开发模式改为了模块化开发，去除了它。 3、作用域Scope。在2中没有$Scope,它使用zone.js来记录监...
Angular使用自带拖动组件-实现拖动效果
qq_40020447的博客
07-23 2972
前言     客户需求：某块内容能拖动改变顺序。网上也找过第三方组件，但是没用成功，可能是姿势不对 于是就发现了angular 自带的拖动组件。 注：本文记录简单的使用，并没有太多的理解。 更多用法，看官网吧===>angular官网拖动 结果演示 目录 一、xxx.module.ts 中相关操作 二、xxx.components.ts 中相关操作 三、xxx.components.html 中相关操作 正文 一、xxx.module.ts 中相关操作 1. 关键代码 ... import { Dr
angular-gridster获取拖拽后数据
07-27
在Angular中使用angular-gridster库，可以通过使用其提供的事件和方法来获取拖拽后的数据。 首先，我们需要在HTML文件中设置Gridster组件，并声明一个用于展示数据的数组： ```html <gridster [options]="gridsterOptions" (gridsterItemChange)="onItemChange($event)"> <gridster-item *ngFor="let item of gridsterItems" [item]="item"> <!-- content --> </gridster-item> </gridster> ``` 在组件的.ts文件中，需要定义gridsterOptions和gridsterItems变量，并使用相关的事件和方法来获取拖拽后的数据： ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { gridsterOptions = { // gridster options }; gridsterItems = [ // initial items ]; onItemChange(event: any) { // get gridster item change event console.log(event); // here you can access the dragged item's updated data } } ``` 在onItemChange方法中，可以通过event参数访问拖拽后的数据。它包含了当前拖拽的GridsterItemComponent实例，我们可以从中获取更新后的数据。 例如，可以通过event.item获取更新后的位置信息、尺寸信息等。如果有其他自定义的数据需要获取，可以在GridsterItemComponent中设置相关属性并在event.item中访问。 以上是使用angular-gridster获取拖拽后数据的基本方法，你可以根据自己的需求进行进一步定制和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值