Drag and Drop jqGrid

Drag and drop functionality in jqgrid, implemented using draggable and droppable methods of jQuery UI.

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:49%">
		<table id="sourceTable" class="my-source-table">	
		</table>
</div>

<div style="display:inline-block;width:49%">
		<table id="destinationTable">
		</table>
</div>

JavaScript

$(document).ready(function() {

				var populateData1 = [{"column1":"<div><h3 style='color:orange'> Heading1</h3><p style='color:orange'>The text goes here. The text goes here. The text goes here. The text goes here.</p></div>"}, 
									{'column1':"<div><h3 style='color:green'> Heading2</h3><p style='color:green'>The text goes here. The text goes here. The text goes here. The text goes here.</p></div>"}, 
									{'column1':"<div><h3 style='color:blue'> Heading3</h3><p style='color:blue'>The text goes here. The text goes here. The text goes here. The text goes here.</p></div>"}, 
									{'column1':"<div><h3 style='color:gray'> Heading4</h3><p style='color:gray'>The text goes here. The text goes here. The text goes here. The text goes here.</p></div>"}];
				
				var populateData2 = [{"column1":"<div><h3> Heading1</h3></div>"},
									{"column1":"<div><h3> Heading2</h3></div>"},
									{"column1":"<div><h3> Heading3</h3></div>"},
									{"column1":"<div><h3> Heading4</h3></div>"}];

$("#sourceTable").jqGrid({
        datatype : "local",
        height : 400,
        colNames : ['Column Name'],
        colModel : [{
            name : 'column1',
            index : 'column1',
            width : 400,
        }],
        caption : "Drag from here",
});
				
$("#destinationTable").jqGrid({
        datatype : "local",
        height : 400,
        colNames : ['Column Name'],
        colModel : [{
            name : 'column1',
            index : 'column1',
            width : 400,
        }],
        caption : "Drop here",
});
				
for(var i = 0; i<populateData1.length; i++){				$("#sourceTable").jqGrid('addRowData', i + 1, populateData1[i]);
}
				
for(var i = 0; i<populateData2.length; i++){		$("#destinationTable").jqGrid('addRowData', i + 1, populateData2[i]);
}
				

$("#gbox_sourceTable tr td").draggable({
					cursor: "move",
					revert: "invalid"});

$("#gbox_destinationTable tr td").droppable({
    drop : function(event, ui)...