Javascript 将包含应用于jQuery UI可排序表可防止将高行移动到最后一个位置

我有一个HTML表，我正试图使用jQueryUISortable小部件为其启用行的重新排序。我已经设置了可排序的

轴：“y”

，我使用

助手

函数在拖动行时保留行的宽度，并且已经将

包含

设置为父表：

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

但是，当存在具有多行高度的行时，包含的行为与预期不符：当拖动较大的行时，表的高度会降低，并且包含的范围会缩小得更大，以至于无法将较大的行移动到表的底部。其他几排都很好

可以在以下位置找到显示此行为的JSFIDLE：

---

这是已知的/预期的行为吗？有什么解决方法吗？

设置包容的方法是，当拖动开始时，计算元素的坐标并将其推送到数组中，然后使用数组查看鼠标移动时是否会发生拖动。在您的情况下，这种计算是在从表中删除行之后进行的，因此包含值不正确

您可以做的一件事是在开始事件时调整这些值，以便它们在从计算中删除行之前与表的状态匹配。您可以通过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;
    }
  });
});

---

这在jQuery UI 1.11.4中非常有效。但是，由于它没有使用文档化的API，因此可能无法在其他版本中工作。我已经验证了它在jQueryUI1.10.4上不起作用。羞耻。我已经编辑了我的答案，在1.10中引起问题的唯一东西是实例方法，这是1.11中新出现的。但是您可以使用$（this.data（）['ui-sortable']访问相同的信息。其余的逻辑是相同的。我还调整了底部坐标，我想它也需要考虑点击偏移。谢谢。然而，我遇到了另一个障碍。如果加载JSFiddle并将结果窗口的宽度设置为中间单元中的文本超过4行，则中间行不能再拖到底部位置。是的，问题是计算底部包容并不那么简单，因为您需要足够的空间将鼠标放到最后一个项之下。仅仅将表作为容器是不够的。你需要一个缓冲区。但这是所有可排序对象都会遇到的问题，将包含设置为可排序对象会导致第一个和最后一个元素出现问题。我认为添加点击偏移量就足够了，但事实并非如此。您可以增加缓冲区并将公差设置为“intersect”，这可能会解决此问题。请详细说明您的解决方案是如何工作的？当最后一个可排序元素的高度小于辅助元素的高度并且设置了包含选项时，您无法将项移动到最后一个位置。因此，必须放大containmet底部参数：

sort.containment[3]+=ui.helper.height（）
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();
    }
  });
});