0

I'm looking to find out a way to drag and drop table rows between two tables. I reused jQuery example for portlets , but that did not work to full satisfaction.

In above screen shot I added border, but that is just for illustration of the issue. Problems:As you will see from the code I have to work with relative measurement there for I use percentage. I wasn't able to enforce row width to fill in whole table. How do I force full row width?
Drag-able row are part of table body (tbody) and headers are done with thead. In this scenario I enforced same style settings on header as body and everything is now squashed to the left. If I leave styling out of header then first header stretches over whole tdody content and second is out of place over nothing. Sort of bad designed table when you forget one column. This become a big issue if there is more then 2 items in a row, for example 4 column in tbody get squashed under one thead column even though there are 4 headers to align under it.

I will be grateful if anybody can advice on this. Or perhaps provide more reliable solution.

Here is my code for table view as see on the screenshot

<html>
<head>
<link rel="stylesheet" type="text/css"
      href="development-bundle/themes/ui-lightness/ui.all.css">
<style type="text/css">
	.column {float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
	table { width: 100%; height: 100%; border: 1px solid black;}
	tr{border: 1px solid black;}
	td{border: 1px solid black; width: 50%}
	</style>
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

	<script type="text/javascript">
	$(function() {
		$(".column").sortable({
			connectWith: '.column'
		});

		$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
			.find(".portlet")
				.addClass("ui-widget-header ui-corner-all")
				.prepend('<span class="ui-icon ui-icon-plusthick"></span>')
				.end()
			.find(".portlet-content");

		$(".portlet .ui-icon").click(function() {
			$(this).toggleClass("ui-icon-minusthick");
			$(this).parents(".portlet:first").find(".portlet-content").toggle();
		});

		$(".column").disableSelection();
	});
	</script>
</head>
<body>

<div class="demo">
<table width="100%">
<tr>
	<td>
		<table>
		<thead>
		<tr class="portlet">
			<td class="portlet-content">Title 1</td>
			<td class="portlet-content">Title 2</td>
		</tr>
		</thead>
		<tbody class="column left">
			<tr class="portlet">
				<td class="portlet-content">Row 1, Column 1, L</td>
				<td class="portlet-content">Row 1, Column 2, L</td>
			</tr>
	
			<tr class="portlet">
				<td class="portlet-content">Row 2, Column 1, L</td>
				<td class="portlet-content">Row 2, Column 2, L</td>
			</tr>

		</tbody>
		</table>
	</td>
	<td>
		<table>
		<thead>
		<tr class="portlet">
			<td class="portlet-content">Title 1</td>
			<td class="portlet-content">Title 2</td>
		</tr>
		</thead>
		<tbody class="column right">
			<tr class="portlet">
				<td class="portlet-content">Row 1, Column 1, R</td>
				<td class="portlet-content">Row 1, Column 2, R</td>
			</tr>
	
			<tr class="portlet">
				<td class="portlet-content">Row 2, Column 1, R</td>
				<td class="portlet-content">Row 2, Column 2, R</td>
			</tr>

		</tbody>
		</table>
	</td>
</tr>
</table>

</div><!-- End demo -->

</body>
</html>
Attachments table.jpg 120.58 KB
1
Contributor
1
Reply
3
Views
7 Years
Discussion Span
Last Post by peter_budo
1

Unfortunately for me there isn't much we can do about dragging row from table to another table.

I found this jQuery plugin jqGrid (open latest release and check Drag and Drop Rows) which performs well with simple HTML document, however it fails to cooperate with Velocity templates which are mandatory to our project. Hopefully somebody with lesser requirements can reuse this

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.