jQuery ui ReSizable带滚动条

Question

我试图在div上设置resizable，但是res的句柄总是包含在div中我可以在滚动条结束的地方使用它。

///////////编辑///////////

我用jScrollPane实现了它但在使用jScroll之后我无法横向调整大小。
demo http://i53.tinypic.com/906rk9.png

Answer 1

它应该可以工作，如果你在要调整大小的元素周围放一个包装器，并使这个包装器可以调整大小。

我正在玩这个想法，这个结果似乎有效：

<script>
$(document).ready(function() {
$(".resizable")
  .wrap('<div/>')
    .css({'overflow':'hidden'})
      .parent()
        .css({'display':'inline-block',
              'overflow':'hidden',
              'height':function(){return $('.resizable',this).height();},
              'width':  function(){return $('.resizable',this).width();},
              'paddingBottom':'12px',
              'paddingRight':'12px'

             }).resizable()
                .find('.resizable')
                  .css({overflow:'auto',
                        width:'100%',
                        height:'100%'});
});
</script>

Test with jsfiddle

Answer 2

jQuery UI团队将可滚动可调整大小的div视为糟糕的设计。所以这是“不会修复功能： http://bugs.jqueryui.com/ticket/9119 Dr.Molle已经说明了解决方法 - 可重新调整的可滚动div包装器。

Answer 3

选中http://api.jqueryui.com/resizable/#option-alsoResize

选项

这对我有用

 $(".responsive-table th").resizable({
                handles: "e",
                containment: 'document',
                alsoResize: ".responsive-table table"
            });