<!-- BEGIN [% component.name %] -->

    [% FOREACH js IN [ # remote source js works:
            'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
            'http://code.jquery.com/ui/1.8.18/jquery-ui.min.js'
        ];
    %]
        <script src="[% js %]" type='text/javascript'></script>
    [% END %]

	<script type="text/javascript">
        $(document).ready(function() {
            $("#[% tbl_id %]").tableDnD();
        });
		// http://fiddle.jshell.net/pmw57/tzYbU/205/show/
		$(window).load(function(){
			var fixHelperModified = function(e, tr) {
				var $originals = tr.children();
				var $helper = tr.clone();
				$helper.children().each(function(index) {
					$(this).width($originals.eq(index).width())
				});
				return $helper;
			},
			updateIndex = function(e, ui) {
				$('td.index', ui.item.parent()).each(function (i) {
					$(this).html(i + 1);
				});
			};

			$("#[% tbl_id %] tbody").sortable({
				helper: fixHelperModified,
				stop: updateIndex
			}).disableSelection();
		});
	</script>
<!-- END [% component.name %] -->
