1

在 Internet Explorer 中查看这个小提琴：http: //jsfiddle.net/MSygf/3/

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

在 Firefox、Chrome 等中，将句柄拖到可滚动 div 的底部将滚动 div。但是，Internet Explorer (8,9) 并非如此...

有没有办法让它拖动手柄到可滚动 div 的底部也会滚动 IE 中的 div？

我试过position:relative在 div 上做，但现在 div 会无限滚动而不是停在底部，所以这是不行的......

4

1 回答 1

2

好吧，当可拖动对象靠近边缘时，我设法通过使用 javascript 滚动 div 来制作一个相当粗略的方法。

小提琴：http: //jsfiddle.net/2cESH/

JS：

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

HTML：

<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>
于 2013-04-03T00:43:23.807 回答