gridster.js 页面任意拖动布局保存数据库。

最新推荐文章于 2026-07-14 09:27:55 发布

原创

最新推荐文章于 2026-07-14 09:27:55 发布 · 6.3k 阅读

收录于

当前文章被以下社区和专栏收录：

这篇博客介绍了如何利用gridster.js库创建可拖动布局的页面，并展示了相关的HTML、CSS和JavaScript代码示例。通过jQuery选择DOM，设置模块的宽高、间距以及拖动选项。当拖动操作停止时，可以发送AJAX请求将布局信息保存到数据库。

需要引入的css和js

<link rel="stylesheet" type="text/css" href="gridster/gridster.css">
  <script src="jquery-1.8.3.js" type="text/javascript"></script>
  <script src="gridster/gridster.js" type="text/javascript" charset="utf-8"></script>

下面附上JS代码

<script type="text/javascript">
      var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({//通过jquery选择DOM实现gridster
          widget_base_dimensions: [200, 220],//模块的宽高 [宽,高]
          widget_margins: [5, 5],//模块的间距 [上下,左右]
//示例：autogenerate_