首页
话题
消息
手册
我的

Gridly 基于 jQuery 的容器拖放布局插件

发布于 2019-06-14 字数 2807 浏览 1097 评论 0

Gridly 是一个基于 jQuery 的容器拖放布局插件,能够动态创建元素和删除元素,流畅的拖拽缩放动画效果,动态的调整网格的大小,能够兼容目前的大多数主流浏览器。

Gridly 基于 jQuery 的容器拖放布局插件

安装插件

1、你可以通过软件包管理器安装,只需要运行下面的代码

npm install -g bower
bower install gridly

2、或者你可以访问插件的 Github 地址,然后下载 Gridly 的压缩包得到源文件,然后将他们引入到你的网页中,下面是一个引入的示例:

<script src="http://cdn.uedsc.com/jquery/2.1.3/jquery.min.js"></script>
<script src="javascript/jquery.gridly.js"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

使用实例

使用 Gridly 并不难,下面是参考代码 。 参考使用就能够简单是展示出它的效果。

<style type="text/css">
  .gridly {
    position: relative;
    width: 960px;
  }
  .brick.small {
    width: 140px;
    height: 140px;
  }
  .brick.large {
    width: 300px;
    height: 300px;
  }
</style>
<div class="gridly">
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
</div>
<script>
  $('.gridly').gridly();
</script>

可选配置参数

Gridly 使用一个相当标准的模式处理网格和提供三个配置选项的大小:base, guttercolumns

$('.gridly').gridly({
  base: 60, // px 
  gutter: 20, // px
  columns: 12
});

自定义回调函数

当使用拖放排序回调可以通过在初始化时使用下面的方法:

var reordering = function($elements) {
  // Called before the drag and drop starts with the elements in their starting position.
};
var reordered = function($elements) {
  // Called after the drag and drop ends with the elements in their ending position.
};
$('.gridly').gridly({
  callbacks: { reordering: reordering , reordered: reordered }
});
$('.gridly').gridly('draggable', 'off'); // disables dragging
$('.gridly').gridly('draggable', 'on);  // enables dragging

相关链接

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!