Drag and drop in jqGrids

Drag and drop of jqGrid data between tables, implemented using draggable and droppable mehtods of jQuery UI.

by pragya91

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
		<div style="display:inline-block;width:40%">
		<table id="techTable" >
		</table>
		</div>

		<div style="display:inline-block;width:40%">
		<table id="prioritizedTable">
			<!--<tr id='trInsideInnerTable'>
					<td id='activeJobsCol'>
							<div class='jobDiv'>
								<h3 style='background:orange'> Active1</h3>
							</div>
							<div class='jobDiv'>
								<h3 style='background:orange'> Active2</h3>
							</div>
							<div class='jobDiv'>
								<h3 style='background:orange'> Active3</h3>
							</div>
					</td>
					
					<td id='pausedJobsCol'>
							<div class='jobDiv'>
								<h3 style='background:yellow'> Paused1</h3>
							</div>
							<div class='jobDiv'>
								<h3 style='background:yellow'> Paused2</h3>
							</div>
							<div class='jobDiv'>
								<h3 style='background:yellow'> Paused3</h3>
							</div>
					</td>
					
					<td id='plannedJobsCol'>
							<div class='jobDiv'>
								<h3 style='background:blue'> Planned1</h3>
							</div>
							<div class='jobDiv'>
								<h3 style='background:blue'> Planned2</h3>
							</div>
							<div class='jobDiv'>
								<h3 style='background:blue'> Planned3</h3>
							</div>
					</td>
			</tr>-->
		</table>
</div>

JavaScript

$(document).ready(function() {
				
				var from = ""; //ACT,PAU,PLA,PRI
				var to = ""; //ACT,PAU,PLA,PRI

				var populateData1 = [{"columnTech":"<span>Technician 1</span><table id='tableInsideARow'><tr><th>ACT</th><th>PAU</th><th>PLA</th></tr><tr id='trInsideInnerTable'><td id='activeJobsCol'><div class='jobDiv' style='background:orange'><h3> Active1</h3></div><div class='jobDiv'  style='background:orange'><h3> Active2</h3></div><div class='jobDiv' style='background:orange'><h3> Active3</h3></div></td><td id='pausedJobsCol'><div class='jobDiv' style='background:yellow'><h3> Paused1</h3></div><div class='jobDiv' style='background:yellow'><h3> Paused2</h3></div><div class='jobDiv' style='background:yellow'><h3> Paused3</h3></div></td><td id='plannedJobsCol'><div class='jobDiv' style='background:blue'><h3> Planned1</h3></div><div class='jobDiv' style='background:blue'><h3> Planned2</h3></div><div class='jobDiv' style='background:blue'><h3> Planned3</h3></div></td></tr></table>"}, 
									{'columnTech':"<span>Technician 2</span><table id='tableInsideARow'><tr><th>ACT</th><th>PAU</th><th>PLA</th></tr><tr id='trInsideInnerTable'><td id='activeJobsCol'><div class='jobDiv' style='background:orange'><h3> Active1</h3></div><div class='jobDiv'  style='background:orange'><h3> Active2</h3></div><div class='jobDiv' style='background:orange'><h3> Active3</h3></div></td><td id='pausedJobsCol'><div class='jobDiv' style='background:yellow'><h3> Paused1</h3></div><div class='jobDiv' style='background:yellow'><h3> Paused2</h3></div><div class='jobDiv' style='background:yellow'><h3> Paused3</h3></div></td><td id='plannedJobsCol'><div class='jobDiv' style='background:blue'><h3> Planned1</h3></div><div class='jobDiv' style='background:blue'><h3> Planned2</h3></div><div class='jobDiv' style='background:blue'><h3> Planned3</h3></div></td></tr></table>"}, 
									{'columnTech':"<span>Technician 3</span><table id='tableInsideARow'><tr><th>ACT</th><th>PAU</th><th>PLA</th></tr><tr...