Question

我正在使用jQuery UI Sortable重新排序行。我有10（td）列，其中我只显示6个，其余4个未使用display：none显示。

我面临的问题是

在Chrome中，拖动所有其他行（而不是拖动的行）列缩小，然后在删除行后，它们会扩展到正常大小。拖动时为什么行列会缩小？
在IE8中与上述相同，但在删除行后，它们仍然处于缩小模式，并且未扩展到正常大小。

请找到以下代码。我的问题是其他行宽度正在缩小而不是可拖动的行。

            this.$('.reportTableBody').sortable({               
            tolerance:"pointer",
            //TODO need to fix
            cursor: 'move',
            revert: 'true',
            helper: function(e, tr)
            {
                var myHelper = [];
                myHelper.push('<table style="width: 100%">');
                myHelper.push($(tr).html());
                myHelper.push('</table>');
                return myHelper.join('');                   
            },              
            create: function (event, ui) {                  
                 $("td").each(function () {
                        $(this).css("width", $(this).width());
                 });                                         
                if (jQuery.browser.msie && Number(jQuery.browser.version) == 8) {
                    this.$('.reportTableBody').sortable("option", "cursorAt", { top: 100 });
                }
            },
            stop : function(event, ui){                 
                $(ui.item.parent()).find('tr').each(function(index){
                    $(this).find('.yearSelectCell:first').html(index + 1);

                });                 
                ui.item.trigger('drop', ui.item.index());                   
            }});

仅供参考 - 有些列有display：none，它们会隐藏列。您是否认为因此柱宽正在缩小？

Answer 1

您可以编写帮助函数来专门设置宽度，如下所示：http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/，或者如果您的页面当前控制表格的列宽，您可以指定 ＆＃34;克隆＆＃34; 帮助选项，然后选择 appendTo 选项，该选项将继承指定选择器的样式。

appendTo 的最简单选项可能适用于您的情况：将其设置为字符串＆＃34; parent＆＃34; 。这将导致拖动的帮助器成为可排序项的兄弟，从而继承其样式。

如果这些选项不符合您的需求，请发布一些代码或链接到JSFiddle。

Answer 2

我的解决方案（希望其他的缩小表行）;您需要设置每个单元格类，或从占位符行中删除它。为了确保原始值被复制而没有重叠或残差，我首先清除了所有'class'和'colspan'......

----- css ----
.ui-sortable-helper {
    display: table;
}

以及可排序表的任何选择器

----- js -----
$('tbody').sortable({
  placeholder: 'sortable-placeholder',
  handle: '.handle',
  helper: function(e, tr) {
    var helper;
    helper = tr.clone();
    helper.css('display', '');
    return helper;
  },
  start: function(event, ui) {
    return ui.placeholder.children().each(function(index, child) {
      var source;
      source = ui.helper.children().eq(index);
      $(child).removeAttr('class').removeAttr('colspan');
      $(child).addClass(source.attr('class'));
      if (source.attr('colspan')) {
        return $(child).attr('colspan', source.attr('colspan'));
      }
    });
  }
});

JQuery UI可排序其他行在拖动时缩小

2 个答案: