jquery/javascript How to add image on top of column header

Question

I am implementing a column re-ordering functionality for a grid. When I drag the column, I want to have an arrow in between column headers to give the user a feedback of where the new column would be placed. SOmething that we have in tab re-ordering in firefox. How do I add this image in between and on top of two column headers. Can I create a div or something dynamically and add image to it while I am dragging ?

Answer 1

Yeah, that sounds right. I'd do it something like this which sets the left offset of a hovering image according to the offset of a column header.

<div id="between_columns" style="position: absolute; top: -9999px; left: -9999px; z-index: 100;"><img src="..." /></div>
<table id="moveable_columns">
  <tr>
    <th>column 1</th><th>column 2</th>
  </tr>
</table>
<script type="text/javascript">
  $("#moveable_columns th").hover(function() {
    var th = $(this);
    var offset = th.offset();
    $("#between_columns").css({top: offset.top, left: offset.left});
  });
</script>