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>