jQuery可排序保持表的宽度

Question

无法找到一个简单的解决方案,jquery可以在拖动元素期间保持表的宽度,forcePlaceholderSize这次实际上不工作,如果表有一些大元素 - 如果我开始拖动它然后表调整大小到仍然在表中的元素最大宽度,所以这就是我所做的:

jQuery("#sortable1").sortable({
    items: "tbody:not([not-sortable])",
    cursor: "move",
    zIndex: 9999,
    start: function (event, ui) {
        var colW = jQuery(".faq_glyph_owner").width();
        self.textWidth = ui.item.innerWidth() - colW * 3;
        jQuery(".faq_text").width(self.textWidth);
        jQuery("#sortable1").css("table-layout", "fixed");
        ui.item.find("div").parent().width(self.textWidth + colW);
    },
    stop: function (event, ui) {
        jQuery("#sortable1").css("table-layout", "auto");
    }
});

所以我通常只计算它应该是的大小并将固定布局应用于表,这里是带有表的示例.所以我的问题是:在排序过程中是否有任何内置的方法来保持表格宽度,就像拖动的元素仍然在表格内？请注意,我不想保持表的布局固定.

PS请忽略'jQuery',我们仍然有遗留原型代码干扰它

Answer 1

var fixHelper = function(e, ui) {  
  ui.children().each(function() {  
  console.log(e);
    $(this).width($(this).width());  
  });  
  return ui;  
};

$("#sortable1 tbody").sortable({  
    helper: fixHelper  
}).disableSelection();

JSfiddle

来源文章

Answer 2

这个怎么样：

$("#sortable1").sortable({
        items: "tbody:not([not-sortable])",
        helper: 'clone',
        cursor: "move",
        zIndex: 9999,
        start: function (event, ui) {
            $(ui.item[0]).show().css('opacity','0');
        },
        stop: function (event, ui) {
            $(ui.item[0]).css('opacity','1');
        }
    });

您基本上是在克隆元素，而不是在移动时隐藏它，只需应用opacity0，然后opacity在放置后应用 1。我真的没有时间测试它。