Speed up development with full-stack environments for every branch.

Learn More

How to create draggable layouts from elements spanning multiple columns using jQuery

Forked from How to use the jQuery Selector.

1373 Runs 2941 Views 594 Copies
Saved

Saved

dipesh.parmar 55

dipesh.parmar
published 4 years ago

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>How to create draggable layouts from elements spanning multiple columns using jQuery</title>
	<link rel="stylesheet" href="dist/jquery.gridster.min.css" />
	<script type="text/javascript" src="dist/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="dist/jquery-ui-1.9.2.custom.min.js"></script>
	<script type="text/javascript" src="dist/jquery.gridster.min.js"></script>
	<script type="text/javascript">
		//DOM Ready
		$(function()
		{
			$(".gridster ul").gridster(
			{
				/*
					margin between wigets
					first for left right
					second for top bottom
				*/
				widget_margins: [5, 5],
				widget_base_dimensions: [100, 100],
				/*
					defining draggable element
					in our case its element heading with number
				*/
				draggable:
				{
					handle: '.handle'
				}
			});
			var gridster = $(".gridster ul").gridster().data('gridster');
		});
	</script>
</head>
<body>
	<!--
		HTML is the main part.
		data-sizex represet the colspan,
		whereas 
		data-sizey represet the rowspan,
		and 
		data-row represet at which row that element will be displayed.
		change those value and see.
	-->
	<div class="gridster">
		<ul id="reszable">
			<li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><div class="handle">1</div></li>
			<li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><div class="handle">2</div></li>
			<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><div class="handle">3</div></li>
			<li data-row="1" data-col="2" data-sizex="2" data-sizey="1"><div class="handle">4</div><br/><b>Custom html</b></li>
			<li data-row="2" data-col="2" data-sizex="2" data-sizey="2"><div class="handle">5</div> <input></li>
			<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><div class="handle">6</div></li>
			<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"><div class="handle">7</div><br><a href="http://www.runnable.com">links work</a></li>
			<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><div class="handle">8</div></li>
			<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"><div class="handle">9</div></li>
			<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"><div class="handle">10</div></li>
			<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"><div class="handle">11</div></li>
			<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"><div class="handle">12</div></li>
		</ul>
	</div>
</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).