jquery.ui sortable using a table and item:tr , placeholder difficulties
Posted
by greg
on Stack Overflow
See other posts from Stack Overflow
or by greg
Published on 2010-03-26T22:00:57Z
Indexed on
2010/03/26
22:03 UTC
Read the original article
Hit count: 608
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>
© Stack Overflow or respective owner