将包含应用于 jQuery UI Sortable table 可防止将高行移动到最后一个位置

Question

我有一个 HTML table，为此我正在尝试使用 jQuery UI Sortable 小部件来启用 re-ordering 的行。我已经设置了 sortable axis: 'y'，正在使用 helper 函数在拖动行时保留行的宽度，并将 containment 设置为parent table:

jQuery(function($) {
    $("#rows").sortable({
        handle: ".handle",
        axis: "y",
        containment: "#main-table",
        helper: function(e, row) {
            // From http://www.paulund.co.uk/fixed-width-sortable-tables. 
            // Sets the width of each cell to be its original width.
            // This prevents the row collapsing into a narrower stub when being dragged.
            row.children().each(function() {
                $(this).width($(this).width());
            });
            return row;
        }
    });
});

但是，当有多个行高的行时，包含不会按预期表现：拖动较大的行时，table 的高度会降低，并且包含会收缩得更多，以至于无法将大行移动到 table 的底部。其他行工作正常。

可在此处找到显示此行为的 JSFiddle：https://jsfiddle.net/AndrewBennet/rc5pnazc/3/

这是known/expected行为吗？有什么解决方法吗？

Answer 1

设置containment的方式是，当拖动开始时，计算元素的坐标并将其推送到一个数组，然后用于查看是否应在其上进行拖动鼠标移动。在您的情况下，此计算是在从 table 中删除该行后进行的，因此 containment 值不正确。

您可以做的一件事是在开始事件时调整这些值，以便它们在从计算中删除行之前匹配 table 的状态。您可以通过 sortable.

的实例方法访问它们

如果你想更精确，你也可以调整这个容器的顶部坐标属性，这样它就可以考虑点击偏移。

例如这样：

jQuery(function($) {
  $("#rows").sortable({
    handle: ".handle",
    axis: "y",
    containment: '#main-table',
    start: function(e, ui) {
      // get the instance of the sortable.
      // instance method is new to jquery ui 1.11, for previous versions
      // you can use $(this).data()['ui-sortable'];
      var sort = $(this).sortable('instance');

      // this makes the placeholder fit with the row that's being dragged
      ui.placeholder.height(ui.helper.height());

      // containment property of the sortable instance is not the same
      // as the containment option. The property is calculated
      // from the option. You need to adjust bottom coordinates
      // to take into account the row you just removed from it and the click offset.
      sort.containment[3] += ui.helper.height() * 1.5 - sort.offset.click.top;

      // Since your handle is centered, and pointer coordinates are used
      // for sortable, but top coordinates are used for containment
      // you can have issues with top row. Adjusting with the click offset
      // will resolve the issue.
      sort.containment[1] -= sort.offset.click.top;
    },

    helper: function(e, row) {
      // From http://www.paulund.co.uk/fixed-width-sortable-tables. 
      // Sets the width of each cell to be its original width.
      // This reverts the default behaviour of the row collapsing into a narrower stub when being dragged.
      row.children().each(function() {
        $(this).width($(this).width());

      });
      return row;
    }
  });
});

https://jsfiddle.net/f1nexjmz/4/

Answer 2

jQuery(function($) {
  $("#rows").sortable({
    handle: ".handle",
    axis: "y",
    containment: "#main-table",
    helper: function(e, row) {
        row.children().each(function() {
            $(this).width($(this).width());
        });
        return row;
    },
    start: function (e, ui) {
        var sort = $(this).sortable('instance');
        sort.containment[3] += ui.helper.height();
    }
  });
});

将包含应用于 jQuery UI Sortable table 可防止将高行移动到最后一个位置

Applying containment to jQuery UI Sortable table prevents moving tall rows to the last position

javascript

jquery

jquery-ui

jquery-ui-sortable