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

jQuery(function($) {
    $("#rows")@L_262_4@rtable({
        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;
        }
    });
});

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

您可以做的一件事是在start事件上调整这些值,以便它们在从计算中删除行之前匹配表的状态.您可以通过sortable的实例方法访问它们.

如果您想要更精确,您也可以调整此包含属性的顶部坐标,以便考虑点击偏移.

像这样例如：

jQuery(function($) {
  $("#rows")@L_262_4@rtable({
    handle: ".handle",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)@L_262_4@rtable('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;
    },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/