jquery.ui sortable using a table and item:tr , placeholder difficulties

Question

Hi

I would really like to give some sortable goodness to the myriad old tables I have created. A little work has a proof of concept behaving ok.

My one sticking point is that the placeholder does not work at all in IE 7 when using item:TR . It works OK in FF.

I can make an perform correctly. It seems to be specific to tables and Any ideas, I have been running through forums, not seeing a lot of people using sortable with tables.

<style type="text/css">


.dndPlaceHolder 
{
    background-color:Red ;
    color:Red;
    height: 20px; 
    line-height:30px;
    border: solid 2px black;
}    

.dndItem
{
    background-color: #c0c0c0;
    border:solid 1px black;
    padding:5px; 
}

</style>

<script type="text/javascript" >
    $(function() {
  $("#myTable").sortable(
  {

placeholder:'dndPlaceHolder', distance:15, items:'tr', forcePlaceholderSize:true, change : dndChange, update : dndUpdate } );

$("#myTable").disableSelection();

$("#myList").sortable( { placeholder:'dndPlaceHolder', distance:15, items:'li', forcePlaceholderSize:true, change : dndChange, update : dndUpdate } );

$("#myList").disableSelection();

});

 function dndChange(event,ui){

 }

 function dndUpdate(event,ui){
    var msg = '';

 }       
</script>

<table id='myTable' >
   <tr class='dndItem' id='1'>
      <td>0 Active - Active</td>
   </tr>
   <tr class='dndItem' id='2'>
      <td>1 Closed - Closed</td>
   </tr>
   <tr class='dndItem' id='3'>
      <td>2 OnHold - On Hold</td>
   </tr>
   <tr class='dndItem' id='4'>
      <td>3 Pending - Pending</td>
   </tr>
</table>

<BR>

   <UL id='myList' >
      <li class='dndItem' id='1'>0 Active - Active</li>
      <li class='dndItem' id='2'>1 Closed - Closed</li>
      <li class='dndItem' id='3'>2 OnHold - On Hold</li>
      <li class='dndItem' id='4'>3 Pending - Pending</li>
   </ul>

Answer 1

Try this:

    $("#myTable").sortable({
        ...
        'start': function (event, ui) {
            ui.placeholder.html('<!--[if IE]><td>&nbsp;</td><![endif]-->');
        },
        ...
    };