gridstack.js

网站地址:http://www.gridstackjs.cn

GitHub:https://github.com/gridstack/gridstack.js

描述信息:创建漂亮的可拖动、可调整大小、响应式引导友好的布局

访问官网

GitHub

ridstack.js 是一个现代 Typescript 库，旨在帮助开发人员创建漂亮的可拖动、可调整大小、响应式引导友好的布局，只需几行代码。

您可以创建更高级的网格：允许用户保留更改、创建小部件的侧边栏以拖动到您的网格中等等。

特征:

纯 JS 可以在任何 UI 框架中使用
移动支持
可拖动、可调整大小的项目
从侧边栏拖放以插入/删除
响应式布局，基于列
保存/恢复
在多个网格之间拖动
嵌套网格
外部 Angular、Vue、React、Ember、Knockout.js 绑定等

代码获取

npm install gridstack然后在 html 中：
<script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="https://gridstackjs.com/node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<style type="text/css">
  .grid-stack { background: #FAFAD2; }
  .grid-stack-item-content { background-color: #18BC9C; }
</style>

<div></div>

<script type="text/javascript">
  var items = [
    {content: 'my first widget'}, // will default to location (0,0) and 1x1
    {w: 2, content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
  ];
  var grid = GridStack.init();
  grid.load(items);
</script>

...就是这样！拖放和调整大小以满足您的需求。寻找更复杂的例子？查看下面的高级示例、导航栏中的链接或我们在 GitHub 中的文档

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/1682