jQuery拖拽插件gridster使用指南

简介

gridster是一个优秀的jQuery拖拽插件，可以帮助用户快速实现可拖拽、可排序的网格布局。本文将对gridster的使用进行详细介绍。

安装

使用gridster之前，需要引入jquery和gridster的javascript文件和css文件，可以直接从官方网站下载或使用npm等包管理工具安装，在HTML文档头部引入如下代码：

<link rel="stylesheet" type="text/css" href="gridster.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.gridster.min.js"></script>

基本用法

初始化

在页面加载完成之后，使用以下代码初始化gridster：

$(".gridster ul").gridster({
    widget_margins: [10, 10], // 每个小部件的外边距
    widget_base_dimensions: [100, 55], // 每个小部件的基础尺寸
    min_cols: 2, // 最小列数
    max_cols: 6, // 最大列数
    resize: {
        enabled: true // 允许调整大小
    }
});

插入小部件

插入小部件需要先在html中放置 ul 元素，然后在js中指定要插入小部件的 li 元素的HTML代码，使用 add_widget 函数将小部件插入 ul 元素。

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">小部件1</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">小部件2</li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">小部件3</li>
    </ul>
</div>

var widgetHtml = "<li data-row='1' data-col='1' data-sizex='1' data-sizey='1'>新小部件</li>";
$(".gridster ul").add_widget(widgetHtml);

调整大小和移动小部件

通过调整小部件的大小和位置，可以自由排列小部件。下面是一个简单的调整大小和移动小部件的示例：

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="3" data-sizey="2">小部件1</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">小部件2</li>
        <li data-row="3" data-col="2" data-sizex="1" data-sizey="1">小部件3</li>
        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">小部件4</li>
        <li data-row="5" data-col="1" data-sizex="2" data-sizey="1">小部件5</li>
    </ul>
</div>

$(".gridster ul li:nth-child(1)").resizable({
    // 只允许改变宽度
    handles: "e",
    resize: function(event, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var x = ui.position.left;
        var y = ui.position.top;
        $(this).attr("data-sizex", w).attr("data-sizey", h);
    }
});

$(".gridster ul li:nth-child(2)").draggable().resizable({
    // 允许改变大小和位置，并限制在网格中
    containment: ".gridster ul",
    resize: function(event, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var x = ui.position.left;
        var y = ui.position.top;
        var row = parseInt(y / 55) + 1;
        var col = parseInt(x / 100) + 1;
        $(this).attr("data-row", row).attr("data-col", col).attr("data-sizex", w).attr("data-sizey", h);
    },
    drag: function(event, ui) {
        var row = parseInt(ui.position.top / 55) + 1;
        var col = parseInt(ui.position.left / 100) + 1;
        $(this).attr("data-row", row).attr("data-col", col);
    }
});

示例说明

示例一

下面我们将使用gridster来创建一个类似于windows桌面的布局。每个小部件代表一个桌面图标，可以拖拽和调整大小。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>gridster示例1</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-PHOzYAHFK9F8zrE38UIEkcwdo+d+/Gv2pd90P2axHz0aV/qKq8GKF9soaW2EdvL0QTG9OIkjtWfPSEb5LZ3mg==" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.10.0/gridstack.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.10.0/gridstack-extra.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.10.0/gridstack.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
</head>
<body>
  <div class="grid-stack">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="4">
      <div class="grid-stack-item-content">图标1</div>
    </div>
    <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="2" data-gs-height="4">
      <div class="grid-stack-item-content">图标2</div>
    </div>
    <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="2" data-gs-height="4">
      <div class="grid-stack-item-content">图标3</div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
      var options = {
        cellHeight: 80,
        verticalMargin: 10,
        animate:true,
      };
      $('.grid-stack').gridstack(options);
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了 grid-stack 类来作为容器，并在其中插入了三个小部件。这些小部件都被包装在 wrapper div元素中，wrapper div元素又被包装在 grid-stack-item div元素中。使用 gridstack 初始化函数对 grid-stack 容器进行初始化，指定了小部件的高度、垂直边距和动画效果。

示例二

下面我们将使用gridster来创建一个可排序的照片墙。用户可以通过拖拽照片进行排序，也可以调整照片大小。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>gridster示例2</title>
  <link rel="stylesheet" type="text/css" href="gridster.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.gridster.min.js"></script>
  <style>
    .photo {
      background-color: #ccc;
      cursor: move;
      opacity: 0.8;
      padding: 5px;
    }
  </style>
</head>
<body>
  <div class="gridster">
    <ul>
      <li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="photo" style="background-image: url('photo1.png');"></li>
      <li data-row="1" data-col="2" data-sizex="1" data-sizey="2" class="photo" style="background-image: url('photo2.png');"></li>
      <li data-row="2" data-col="1" data-sizex="2" data-sizey="1" class="photo" style="background-image: url('photo3.png');"></li>
    </ul>
  </div>
  <script type="text/javascript">
    var options = {
      widget_margins: [10, 10],
      widget_base_dimensions: [100, 100],
      min_cols: 3,
      resize: {
        enabled: true
      }
    };
    $('.gridster ul').gridster(options).sortable({
      items: 'li',
      helper: 'clone',
      tolerance: 'pointer',
      forceHelperSize: true,
      placeholder: 'photo-placeholder',
      start: function(event, ui) {
        ui.helper.width(100).height(100);
      },
      stop: function(event, ui) {
        var row = ui.position.top / 100 + 1;
        var col = ui.position.left / 100 + 1;
        $(ui.item).attr('data-row', row).attr('data-col', col);
        $('.gridster ul').gridster().data('gridster').disable().enable();
      }
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了 ul 元素来作为容器，并在其中插入了三张图片。使用了对 gridster 进行初始化的 options 参数，指定了小部件的外边距、基础尺寸和最小列数，并允许调整大小。我们还使用jquery-ui的 sortable 函数来实现排序，使用 helper 属性进行拖动功能，start 和 stop 属性指定移动上限和下限，可拖动的占位符使用 placeholder 属性来指定。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery拖拽插件gridster使用指南 - Python技术站

jQuery拖拽插件gridster使用指南

jQuery拖拽插件gridster使用指南

简介

安装

基本用法

初始化

插入小部件

调整大小和移动小部件

示例说明

示例一

示例二

相关文章