mirror of
				https://github.com/librenms/librenms.git
				synced 2024-10-07 16:52:45 +00:00 
			
		
		
		
	Add 'lib/gridster/' from commit 'a7ed9a4adec9f7c8361ad6f392993a1f0b9c1601'
git-subtree-dir: lib/gridster git-subtree-mainline:80f8419dacgit-subtree-split:a7ed9a4ade
This commit is contained in:
		
							
								
								
									
										96
									
								
								lib/gridster/demos/custom-drag-handle.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										96
									
								
								lib/gridster/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