使用方法
安装：
npminstalljquery.gridstrap
在HTML文件中引入。
<linkhref="dist/jquery.gridstrap.min.css"rel="stylesheet">
<scriptsrc="//code.jquery.com/jquery-3.2.1.js"></script>
<scriptsrc="dist/jquery.gridstrap.min.js"></script>
HTML结构
<divid="grid"class="row">
<divclass="col-xs-4col-sm-2col-md-1"></div>
<divclass="col-xs-4col-sm-2col-md-1"></div>
...
</div>
初始化插件
然后通过下面的代码来初始化插件。
$(function(){
$('#grid').gridstrap({
/*defaultoptions*/
});
});
配置参数
$.Gridstrap.defaultOptions={
gridCellSelector:'>*',//jQueryselectorforgrid'scellsrelativetoparentelement.
hiddenCellClass:'gridstrap-cell-hidden',//classappliedto'hidden'cells.
visibleCellClass:'gridstrap-cell-visible',//classappliedto'visible'cells.
nonContiguousPlaceholderCellClass:'gridstack-noncontiguous',//classappliedtonon-contiguousplaceholdercells.
dragCellClass:'gridstrap-cell-drag',//classappliedtodraggingcell.
resizeCellClass:'gridstrap-cell-resize',//classappliedtoresizingcell.
mouseMoveSelector:'body',//jQueryselectortobindmousemouseandmouseupevents.
visibleCellContainerParentSelector:null,//jQueryselectortoappend'visible'cellcontainerto.Nullwillusetheelementthepluginisinitialisedon.
visibleCellContainerClass:'gridstrap-container',//classappliedtothecellcontainerelement.
getHtmlOfSourceCell:function($cell){//functiontoreturnthehtmlofa'source'cell.
return$cell[0].outerHTML;
},
dragCellHandleSelector:'*',//jQueryselectorrelativetoandincludingcellfordraghandling.
draggable:true,//togglemousedragging.
rearrangeOnDrag:true,//togglethetriggeringofrearrangingcellsbeforemouseup.
resizeHandleSelector:null,//jQueryselectorrelativetocellforresizehandling.Nulldisables.
resizeOnDrag:true,//togglemouseresizing.
swapMode:false,//toggleswaporinsertmodewhenrearrangingcells.
nonContiguousCellHtml:null,//htmltousefornon-contiguousplaceholdercells.
autoPadNonContiguousCells:true,//toggleaddingnon-contiguouscellsautomaticallyondragorasotherwiseneeded.
updateCoordinatesOnWindowResize:true,//enablewindowresizeeventhandler.
debug:false,//toggleconsoleoutput.
dragMouseoverThrottle:150,//throttlecellmouseovereventsforrearranging.
windowResizeDebounce:50,//debounceredrawonwindowresize.
mousemoveDebounce:0//debouncemousemovefordraggingcells.
};
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery