Question

找不到jquery的可排序的简单解决方案，以便在拖动元素期间保持表的宽度，forcePlaceholderSize这次实际上不工作，如果表有一些大元素 - 如果我开始拖动它，那么表调整为静止-table元素的最大宽度，所以这就是我所做的：

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");
    }
});

所以我通常只计算它应该是的大小并将固定布局应用于表格here is sample of this with table。所以我的问题是：在排序过程中是否有任何内置的方法来保持表格宽度，就像拖动的元素仍在表格中一样？请注意我不想保持表格的布局固定。

P.S。请忽略'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

Source article

Answer 2

这是我用于此的代码。我创建了一个辅助函数，它获取行中所有内容的高度和宽度，然后将其显式设置为高度和宽度，再添加一行作为占位符。

var date = new DateTime(2016, 10, 29, 23, 59, 59, DateTimeKind.Utc);
var foo = TimeZoneInfo.FindSystemTimeZoneById("W. Europe Standard Time").IsDaylightSavingTime(date);

另一个文件（real-dimensions.js）：

var fixHelper = function (e, ui) {
    ui.children().each(function () {
        if ($(this).children().length > 0) {
            fixHelper(e, $(this));
        }
        if(parseInt($(this).css("margin-left")) != 0)
            $(this).css("margin-left", $(this).css("margin-left"));

        if (parseInt($(this).css("margin-right")) != 0)
            $(this).css("margin-right", $(this).css("margin-right"));

        $(this).width($(this).realWidth(true));
        $(this).height($(this).realHeight(true));
    });

    ui.height(ui.realHeight());
    return ui;
};

var unfixHelper = function (ui) {
    ui.children().each(function () {
        if ($(this).children().length > 0) {
            unfixHelper($(this));
        }
        $(this).css("margin-left", "");
        $(this).css("margin-right", "");
        $(this).css("width", "");
        $(this).css("height", "");
    });
    ui.css("height", "");
};


var sortableOptions = new Object({
    items: "tbody:not([not-sortable])",
    cursor: "move",
    zIndex: 9999,
    helper: fixHelper,
    start: function (e, ui) {
        ui.placeholder.height(ui.item.height());
        ui.placeholder.html("<td colspan=\"10\">&nbsp;</td>");
    },
    stop: function (e, ui) {
        unfixHelper(ui.item);
        ui.placeholder.html("");
    }   
});

jQuery("#sortable1").sortable(sortableOptions);

Answer 3

可排序窗口小部件中有一个名为helper的选项。其目的是为拖动显示操作添加一些行为。修改的相关部分是：

jQuery('#sortable1').sortable({
    helper: fixedWidth
});

function fixedWidth(e, ui) {
    var max_w = 0;
    // get the max width from all the children
    ui.children().each(function() {
        var w = $(this).width();
        if (w > max_w) max_w = w;
    });
    // set the width of the table to be the max
    $('#sortable1').width(max_w);
    return ui; 
}

可以在此JSFiddle中找到完整的实施。我从这个blog获得灵感。

另外，如果您介意我的意见，我会使用<ul>代替<table>以更简单的方式构建此结构。像this一样。您只需设置<ul>的样式以获得固定的宽度。

Answer 4

这个怎么样：

$("#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');
        }
    });

您基本上是克隆元素而不是在移动时隐藏它，您只需应用opacity 0，然后在删除后应用opacity 1。我没有时间去测试它。

jQuery可排序保持表的宽度

4 个答案: