jquery.ui 可使用表和 item:tr 排序，占位符困难

Posted 2023-03-05

【中文标题】jquery.ui 可使用表和 item:tr 排序，占位符困难

【英文标题】：jquery.ui sortable using a table and item:tr , placeholder difficulties

【发布时间】：2011-02-01 09:24:51

【问题描述】：

我想为我创建的表添加对排序的支持。

使用 item:TR 时，我实现的占位符在 IE 7 中根本不起作用。它在 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>

您能否使用我提供的代码帮助我满足我的要求，或者让我参考演示如何完成此操作的指南？

【问题讨论】：

请修正您提交的代码。

【参考方案1】：

试试这个：

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

【讨论】：

你也可以使用<td colspan="...">来更好的匹配用户界面

谢谢！很好的解决方案。