jquery.gridstrap.js是一款基于Bootstrap的可拖拽式网格系统插件。该插件可以快速生成基于bootstrap响应式网格的、可以自由拖拽的网格布局。
使用方法
安装：
npm install jquery.gridstrap
在HTML文件中引入。
<link href="dist/jquery.gridstrap.min.css" rel="stylesheet"><script src="//code.jquery.com/jquery-3.2.1.js"></script><script src="dist/jquery.gridstrap.min.js"></script>
HTML结构
<div id="grid" class="row"> <div class="col-xs-4 col-sm-2 col-md-1"></div> <div class="col-xs-4 col-sm-2 col-md-1"></div> ...</div>
初始化插件
然后通过下面的代码来初始化插件。
$(function(){ $('#grid').gridstrap({ /* default options */ });}); 配置参数
$.Gridstrap.defaultOptions = { gridCellSelector: '>*', // jQuery selector for grid's cells relative to parent element. hiddenCellClass: 'gridstrap-cell-hidden', // class applied to 'hidden' cells. visibleCellClass: 'gridstrap-cell-visible', // class applied to 'visible' cells. nonContiguousPlaceholderCellClass: 'gridstack-noncontiguous', // class applied to non-contiguous placeholder cells. dragCellClass: 'gridstrap-cell-drag', // class applied to dragging cell. resizeCellClass: 'gridstrap-cell-resize', // class applied to resizing cell. mouseMoveSelector: 'body', // jQuery selector to bind mousemouse and mouseup events. visibleCellContainerParentSelector: null, // jQuery selector to append 'visible' cell container to. Null will use the element the plugin is initialised on. visibleCellContainerClass: 'gridstrap-container', // class applied to the cell container element. getHtmlOfSourceCell: function ($cell) { // function to return the html of a 'source' cell. return $cell[0].outerHTML; }, dragCellHandleSelector: '*', // jQuery selector relative to and including cell for drag handling. draggable: true, // toggle mouse dragging. rearrangeOnDrag: true, // toggle the triggering of rearranging cells before mouseup. resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables. resizeOnDrag: true, // toggle mouse resizing. swapMode: false, // toggle swap or insert mode when rearranging cells. nonContiguousCellHtml: null, // html to use for non-contiguous placeholder cells. autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as otherwise needed. updateCoordinatesOnWindowResize: true, // enable window resize event handler. debug: false, // toggle console output. dragMouseoverThrottle: 150, // throttle cell mouseover events for rearranging. windowResizeDebounce: 50, // debounce redraw on window resize. mousemoveDebounce: 0 // debounce mousemove for dragging cells.}; jquery.gridstrap.js插件的github网址为：https://github.com/rosspi/gridstrap.js