Question

结帐这个小提琴：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？

我尝试在div上做position:relative但是现在div会无限滚动而不是停在底部，这样就不行了....

Answer 1

好吧，当draggable靠近边缘时，我通过使用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>

当放置在可滚动的div中时，jquery ui sortable不会在IE中滚动

1 个答案: