布局框架

基于Bootstrap的可拖拽式网格系统插件

也想出现在这里?联系我们
面包多

基于Bootstrap的可拖拽式网格系统插件-创客云
jquery.gridstrap.js 是一款基于 Bootstrap 的可拖拽式网格系统插件。该插件可以快速生成基于 bootstrap 响应式网格的、可以自由拖拽的网格布局。
使用方法
在 HTML 文件中引入。

  1. <link href="dist/jquery.gridstrap.min.css" rel="stylesheet">
  2. <script src="//code.jquery.com/jquery-3.2.1.js"></script>
  3. <script src="dist/jquery.gridstrap.min.js"></script>
也想出现在这里?联系我们
创客主机

HTML 结构

也想出现在这里?联系我们
创客主机

  1. <div id="grid" class="row">
  2.   <div class="col-xs-4 col-sm-2 col-md-1"></div>
  3.   <div class="col-xs-4 col-sm-2 col-md-1"></div>
  4.   ...
  5. </div>

初始化插件
然后通过下面的代码来初始化插件

  1. $(function(){
  2.   $('#grid').gridstrap({
  3.     /* default options */
  4.   });
  5. });

配置参数

  1. $.Gridstrap.defaultOptions = {
  2.   gridCellSelector: '>*', // jQuery selector for grid's cells relative to parent element.
  3.   hiddenCellClass: 'gridstrap-cell-hidden', // class applied to 'hidden' cells.
  4.   visibleCellClass: 'gridstrap-cell-visible', // class applied to 'visible' cells.
  5.   nonContiguousPlaceholderCellClass: 'gridstack-noncontiguous',  // class applied to non-contiguous placeholder cells.
  6.   dragCellClass: 'gridstrap-cell-drag', // class applied to dragging cell.
  7.   resizeCellClass: 'gridstrap-cell-resize', // class applied to resizing cell.
  8.   mouseMoveSelector: 'body', // jQuery selector to bind mousemouse and mouseup events.
  9.   visibleCellContainerParentSelector: null, // jQuery selector to append 'visible' cell container to. Null will use the element the plugin is initialised on.
  10.   visibleCellContainerClass: 'gridstrap-container', // class applied to the cell container element.
  11.   getHtmlOfSourceCell: function ($cell) { // function to return the html of a 'source' cell.
  12.     return $cell[0].outerHTML;
  13.   },  
  14.   dragCellHandleSelector: '*', // jQuery selector relative to and including cell for drag handling.
  15.   draggable: true, // toggle mouse dragging.
  16.   rearrangeOnDrag: true, // toggle the triggering of rearranging cells before mouseup.
  17.   resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables.
  18.   resizeOnDrag: true, // toggle mouse resizing. 
  19.   swapMode: false, // toggle swap or insert mode when rearranging cells.
  20.   nonContiguousCellHtml: null, // html to use for non-contiguous placeholder cells.
  21.   autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as otherwise needed.
  22.   updateCoordinatesOnWindowResize: true, // enable window resize event handler.
  23.   debug: false, // toggle console output.
  24.   dragMouseoverThrottle: 150, // throttle cell mouseover events for rearranging.
  25.   windowResizeDebounce: 50,  // debounce redraw on window resize.
  26.   mousemoveDebounce: 0 // debounce mousemove for dragging cells.
  27. };

Github 网址:https://github.com/rosspi/gridstrap.js

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!