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


dipesh.parmar 55

published 4 years ago

<html lang="en-US">
	<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
			$(".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
					handle: '.handle'
			var gridster = $(".gridster ul").gridster().data('gridster');
		HTML is the main part.
		data-sizex represet the colspan,
		data-sizey represet the rowspan,
		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>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).