<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于Bootstrap的可拖拽式网格系统插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" />
<link rel="stylesheet" href="./indexstyle.css">
<link rel="stylesheet" href="./jquery.gridstrap.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>基于Bootstrap的可拖拽式网格系统插件 <span>Draggable Bootstrap Grid Layouts With Gridstrap.js</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Layout-Interface/201911295852.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<section class="main-content">
<p><a href="//github.com/rosspi/gridstrap.js" target="_blank">gridstrap.js</a> is a jQuery plugin designed to take Bootstrap's responsive <a href="//getbootstrap.com/css/#grid" target="_blank">grid</a> system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.</p>
<p>I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid interfaces.</p>
<p>Both gridster.js and gridstack.js inspired this plugin.</p>
<h1 id="header-1"><a href="#header-1"></a>Demo</h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#basic-demo" aria-controls="basic-demo" role="tab" data-toggle="tab">Basic</a>
</li>
<li role="presentation">
<a href="#responsive-demo" aria-controls="responsive-demo" role="tab" data-toggle="tab">Responsive</a>
</li>
<li role="presentation">
<a href="#nested-demo" aria-controls="nested-demo" role="tab" data-toggle="tab">Nested</a>
</li>
<li role="presentation">
<a href="#resize-demo" aria-controls="resize-demo" role="tab" data-toggle="tab">Resize</a>
</li>
<li role="presentation">
<a href="#noncontiguous-demo" aria-controls="noncontiguous-demo" role="tab" data-toggle="tab">Non-contiguous</a>
</li>
<li role="presentation">
<a href="#dual-demo" aria-controls="dual-demo" role="tab" data-toggle="tab">Dual</a>
</li>
<li role="presentation">
<a href="#custom-demo" aria-controls="custom-demo" role="tab" data-toggle="tab">Custom</a>
</li>
<li role="presentation">
<a href="#api-demo" aria-controls="api-demo" role="tab" data-toggle="tab">API</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="basic-demo">
<div id="basic-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><div id="basic-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>
<script>
$('#basic-grid').gridstrap();
</script></code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="responsive-demo">
<iframe style="width:500px;" id="ff" src="./responsive.html" >
</iframe>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><script>
// The above grid is within an iframe to demonstrate its responsive behaviour.
// It is otherwise the same as the basic demo.
$('#responsive-grid').gridstrap();
</script></code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nested-demo">
<div id="nested-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><div id="nested-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 class="col-xs-4 col-sm-2 col-md-1">
<div class="nested-inner-grid">
<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>
</div>
<div class="col-xs-4 col-sm-2 col-md-1"></div>
...
</div>
<script>
// Init outer grid first.
$('#nested-grid').gridstrap();
// Inner grid is identifiable via a class rather than an id.
// This is necessary because gridstrap creates a copy of all internal html elements
// and you cannot have two elements with the same id.
// By default the visible cells within the grid will have a 'gridstrap-cell-visible' class.
$('.gridstrap-cell-visible .nested-inner-grid').gridstrap();
</script></code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="resize-demo">
<div id="resize-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><div id="resize-grid" class="row">
<div class="col-xs-2 cell"><div class="inner"><div class="resize"></div></div></div>
<div class="col-xs-2 cell"><div class="inner"><div class="resize"></div></div></div>
...
</div>
<script>
$('#resize-grid').gridstrap({
resizeHandleSelector: '.resize'
});
// The above is all you need to do to enable resizing.
// However, the below shows how we can maintain Bootstrap's
// grid functionality.
var gs = $('#resize-grid').data('gridstrap');
$('#resize-grid').on('cellresize', function (e) {
e.preventDefault();
var index = gs.getCellIndexOfElement(e.target);
gs.modifyCell(index, function ($getVisibleCell, $getHiddenCell) {
var $hiddenCell = $getHiddenCell();
// Remove Bootstrap's column classes, then add ones appropriate
// to the cell's outer width.
for (var i = 1; i <= 12; i++) {
$hiddenCell.removeClass('col-xs-' + i);
}
$hiddenCell.addClass('col-xs-1');
var oneWidth = $hiddenCell.outerWidth();
for (var i = 2; i <= 12; i++) {
if ($hiddenCell.outerWidth() + oneWidth / 2 <= e.width) {
$hiddenCell.removeClass('col-xs-' + (i - 1));
$hiddenCell.addClass('col-xs-' + i);
} else {
$hiddenCell.removeClass('col-xs-' + i);
书架-Nested.zip （50个子文件） 
书架-Nested css 
htmleaf-demo.css 6KB normalize.css 2KB indexstyle.css 18KB related 
2.jpg 24KB 1.jpg 20KB
responsive.html 2KB ul.html 5KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB jquery.gridstrap.js 57KB index.html 13KB divjs drag.js 5KB div.html 1KB jquery-1.10.2.js 94B main.js 47B style.css 368B 平面 css context.standalone.css 5KB image 1楼.jpg 111KB
demo_picture.png 48KB pm.html 13KB js jquery.min.js 91KB context.js 3KB drag.js 906B layer.ext.js 5KB layer.js 15KB dist jquery.gridstrap.min.js.map 32KB jquery.gridstrap.min.js 26KB jquery.gridstrap.js 57KB jquery.gridstrap.min.css 645B jquery.gridstrap.css 730B src utils.js 4KB internal.js 20KB handlers.js 6KB setup.js 2KB gridstrap.js 4KB methods.js 10KB constants.js 973B style.css 470B uljs jquery.min.js 341B jquery.dragsort-0.5.2.min.js 17KB index - 副本.html 1KB indexscript.js 1KB responsiveLocal.html 2KB jQuery之家.url 268B index.1.html 8KB readme.html 865B jquery.gridstrap.css 730B indexLocal.html 12KB资源评论
