Javascript jqueryui排序表不'；当放置在可滚动的div中时，不要在IE中滚动

签出此小提琴：在Internet Explorer中

<div style="overflow-y:auto;max-height:100px;">
<ul class="draggable">
    <li class="drag">Drag 1</li>
    <li class="drag">Drag 2</li>
    <li class="drag">Drag 3</li>
    <li class="drag">Drag 4</li>
    <li class="drag">Drag 5</li>
    <li class="drag">Drag 6</li>
    <li class="drag">Drag 7</li>
    <li class="drag">Drag 8</li>
    <li class="drag">Drag 9</li>
    <li class="drag">Drag 10</li>
    <li class="drag">Drag 11</li>
    <li class="drag">Drag 12</li>
</ul>
</div>


  var sort_opts = {
    helper: function(e, ui) {
      ui.children().each(function() {
        $(this).width($(this).width());
      });
      return ui;
    },
    stop: function(e, ui) {
      tableObj.siblings('.' + attrs.realm + '-reorder-weights').val(tableObj.sortable('toArray').toString());
    },
    axis: 'y',
    items: 'li.drag'
  };
  $('.draggable').sortable( sort_opts );

拖动1
拖动2
拖动3
拖动4
拖动5
拖动6
拖动7
拖动8
拖动9
拖动10
拖动11
拖动12

变量排序选项={
助手：函数（e、ui）{
ui.children（）.each（函数（））{
$（this.width（$（this.width（））；
});
返回用户界面；
},
停止：功能（e、ui）{
tableObj.sibles（'..+attrs.realm+'-重新排序权重'）.val（tableObj.sortable（'toArray'）.toString（））；
},
轴：‘y’，
项目：“li.拖动”
};
$（'.draggable'）。可排序（排序选项）；

在Firefox、Chrome等浏览器中，将手柄拖动到可滚动div的底部将滚动div。但是，Internet Explorer（8,9）并非如此

有没有一种方法可以使拖动手柄到可滚动div的底部也可以在IE中滚动div

---

我试着在div上执行

position:relative

，但是现在div将无限滚动，而不是停在底部，所以这是一个不可行的方法。

好吧，我已经设法通过在拖动表接近边缘时使用javascript滚动div来实现一个相当粗糙的方法

小提琴：

JS:

var排序\u选项={
助手：函数（e、ui）{
ui.children（）.each（函数（）{
$（this.width（$（this.width（））；
});
返回用户界面；
},
停止：功能（e、ui）{
tableObj.sibles（'..+attrs.realm+'-重新排序权重'）.val（tableObj.sortable（'toArray'）.toString（））；
},
排序：函数（e、ui）{
if（$（ui.item）.offset（）.top<20&&$（'#容器元素'）.scrollTop（）>0）{
$（'#容器元素'）.scrollTop（$（'#容器元素'）.scrollTop（）-3）；
}
if（$（ui.item）.offset（）.top>$（“#容器元素”）.height（）-20&$（“#容器元素”）.scrollTop（）<$（“#容器元素ul”）.eq（0.height（））{
$（'#容器元素'）.scrollTop（$（'#容器元素'）.scrollTop（）+3）；
}
},
轴：‘y’，
项目：“li.拖动”
};
$（'.draggable'）。可排序（排序选项）；

HTML:

拖动1
拖动2
拖动3
拖动4
拖动5
拖动6
拖动7
拖动8
拖动9
拖动10
拖动11
拖动12

非常好！但是有一个问题…向上拖动可滚动div不如向下拖动平滑…有没有办法使其向上拖动与向下拖动一样平滑？是否可以通过设置

滚动顶的动画而不是直接设置它来解决问题？
  var sort_opts = {
      helper: function (e, ui) {
          ui.children().each(function () {
              $(this).width($(this).width());
          });
          return ui;
      },
      stop: function (e, ui) {
          tableObj.siblings('.' + attrs.realm + '-reorder-weights').val(tableObj.sortable('toArray').toString());
      },
      sort: function (e, ui) {
          if($(ui.item).offset().top < 20 && $('#container-element').scrollTop() > 0){
              $('#container-element').scrollTop($('#container-element').scrollTop()-3);
          }
          if($(ui.item).offset().top > $('#container-element').height()-20 && $('#container-element').scrollTop() < $('#container-element ul').eq(0).height()){
              $('#container-element').scrollTop($('#container-element').scrollTop()+3);
          }
      },
      axis: 'y',
      items: 'li.drag'
  };
  $('.draggable').sortable(sort_opts);

<div id="container-element" style="overflow-y:auto;max-height:100px;">
    <ul class="draggable">
        <li class="drag">Drag 1</li>
        <li class="drag">Drag 2</li>
        <li class="drag">Drag 3</li>
        <li class="drag">Drag 4</li>
        <li class="drag">Drag 5</li>
        <li class="drag">Drag 6</li>
        <li class="drag">Drag 7</li>
        <li class="drag">Drag 8</li>
        <li class="drag">Drag 9</li>
        <li class="drag">Drag 10</li>
        <li class="drag">Drag 11</li>
        <li class="drag">Drag 12</li>
    </ul>
</div>