2010-03-26 82 views
7

我想補充的排序,以我所創建的表支持。jquery.ui可排序使用表格和項目:TR,佔位困難

佔位符我已經實現不使用項目時,在IE 7在所有的工作:TR。它在FF作品確定。
我曾嘗試在<UL\>代碼並正確執行。這似乎是具體的表和

我已經通過論壇研究,並且看起來不是很多的人都在使用與表排序:

<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> 

可以使用的代碼,你幫我的要求我已經提供或參考我的指導演示如何做到這一點?

+0

請修正您所提交的代碼。 – dclowd9901 2010-03-26 22:10:33

+0

修復代碼格式 – jitter 2010-03-27 18:21:37

回答

19

試試這個:

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

這對我有用:) – 2012-01-09 15:10:10

+2

您也可以使用''更好地匹配用戶界面 – machineaddict 2013-04-01 12:25:35

+0

謝謝!好的解決方案 – Alex 2013-12-04 10:29:15