在Firefox中列表底部时，JQuery UI sortable不会滚动

时间：2017-03-24 04:11:13

标签： jquery-ui

我有一个针对表的JQuery UI可排序。在Firefox中，当您单击并拖动行一直到底部Chrome时会为您滚动列表，但在Firefox中，它只是将屏幕拖离到最后一行可见行下面的虚无。

此特定表位于具有固定高度的div内。

我正在使用JQuery 2.1.0和JQuery UI 1.12。

以下是代码笔： - https://codepen.io/anon/pen/BWVpdE

这是HTML： - 

<div class="scrollableContainer">

<table>
    <thead>
      <tr class="ui-state-default">
        <th colspan="4">Original</th>
        <th colspan="4">table heading</th>
        <th colspan="4">table heading</th>
        <th colspan="4">table heading</th>
        <th colspan="4">table heading</th>
        <th colspan="4">Current Pos</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="ui-state-default">
        <th colspan="4">Original</th>
        <th colspan="4">table footer</th>
        <th colspan="4">table footer</th>
        <th colspan="4">table footer</th>
        <th colspan="4">table footer</th>
        <th colspan="4">Current Pos</th>
      </tr>
    </tfoot>
    <tbody>
    <tr class="ui-state-default">
      <th colspan="4">First Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">1</td>
    </tr>
    <tr class="ui-state-default even">
      <th colspan="4">Second Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">2</td>
    </tr>
    <tr class="ui-state-default">
      <th colspan="4">Third Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">3</td>
    </tr>
    <tr class="ui-state-default even">
      <th colspan="4">Fourth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">4</td>
    </tr>
    <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
          <tr class="ui-state-default">
      <th colspan="4">Fifth Row</th>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">data</td>
      <td colspan="4">5</td>
    </tr>
    </tbody>
</table>
</div>

这是SCSS： - 

.scrollableContainer {
  padding-top:60px;
  height: 200px;
  position:relative;
}
.scrollArea {
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}
table {
  border-collapse: collapse;
  overflow-x: hidden;
  overflow-y: auto;
}

td, th {
    background: #fff;
  border-width: 0;
    border-bottom: 1px solid #B8B8B8;
    font-weight: normal !important;
  padding: 15px;
    text-align: left;
    vertical-align: middle;
}

tr.even {
  td, th {
    background: #f1f1f1;
  }
}

thead, tfoot {
  text-transform: uppercase;

  th {
    background: #ccc;
  }
}

body {
  color: #111;
  font-size: 16px;
  font-family: sans-serif;
}

这是JS： - 

$( "table tbody" ).sortable( {
    update: function( event, ui ) {
    $(this).children().each(function(index) {
            $(this).find('td').last().html(index + 1)
    });
  }
});

1 个答案:

答案 0 :(得分：0)

好的，所以我找到了使用MutationObserver和getBoundingClientRect的解决方案。

实际上，这不是一个很好的解决方案，但它确实有效。

这是更新的JS： - 

var observer = null;
// Code taken from: http://stackoverflow.com/a/27263050/1545858
$.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         ;
};
$( "table tbody" ).sortable( {
  start: function(event, ui) {
    observer = new MutationObserver(function(mutations) {
      window.requestAnimationFrame(function() {
        if (mutations[0].attributeName === 'style') { 
            if (ui.item.is(':offscreen')) {
                window.requestAnimationFrame(function () {
                   ui.item[0].scrollIntoView();            
                });

            }
        }
      });
    });
    observer.observe(ui.item[0], { attributes: true });
  },
  stop: function(event, ui) {
    observer.disconnect();
  },
    update: function( event, ui ) {
    $(this).children().each(function(index) {
            $(this).find('td').last().html(index + 1)
    });
  }
});

如果有人能告诉我为什么要这么做，那就太好了。我觉得这是JQuery / JQuery UI / Firefox中的一个错误，但我不知道为什么。

感谢。

相关问题
最新问题