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://fly63.com/nav/1682