mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
bring the Demo's into master for testing & Automate the updates to gh-pages branch
This commit is contained in:
96
demos/custom-drag-handle.html
Normal file
96
demos/custom-drag-handle.html
Normal file
@ -0,0 +1,96 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Demo » Custom drag handle » gridster.js</title>
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/demo.css">
|
||||
<link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
<script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Custom drag handle</h1>
|
||||
|
||||
<p>Restricts dragging from starting unless the mousedown occurs on the specified element(s).</p>
|
||||
|
||||
|
||||
<div class="gridster">
|
||||
<ul>
|
||||
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
|
||||
<header>|||</header>
|
||||
0
|
||||
</li>
|
||||
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
|
||||
<header>|||</header>
|
||||
1
|
||||
</li>
|
||||
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
|
||||
<header>|||</header>
|
||||
2
|
||||
</li>
|
||||
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
|
||||
<header>|||</header>
|
||||
3
|
||||
</li>
|
||||
|
||||
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
|
||||
<header>|||</header>
|
||||
4
|
||||
</li>
|
||||
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
|
||||
<header>|||</header>
|
||||
5
|
||||
</li>
|
||||
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
|
||||
<header>|||</header>
|
||||
6
|
||||
</li>
|
||||
<li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
|
||||
<header>|||</header>
|
||||
7
|
||||
</li>
|
||||
<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
|
||||
<header>|||</header>
|
||||
8
|
||||
</li>
|
||||
|
||||
<li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
|
||||
<header>|||</header>
|
||||
9
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.gridster li header {
|
||||
background: #999;
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: normal;
|
||||
padding: 4px 0 6px;
|
||||
margin-bottom: 20px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var gridster;
|
||||
|
||||
$(function () {
|
||||
|
||||
gridster = $(".gridster ul").gridster({
|
||||
widget_base_dimensions: [100, 120],
|
||||
widget_margins: [5, 5],
|
||||
draggable: {
|
||||
handle: 'header'
|
||||
}
|
||||
}).data('gridster');
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user