带有滚动条的 jQuery ui ReSizable答案

【问题标题】：jQuery ui ReSizable with scroll bars带有滚动条的 jQuery ui ReSizable
【发布时间】：2010-10-04 19:33:38
【问题描述】：

我正在尝试在 div 上调整大小，但调整大小的句柄始终包含在 div 中，我可以将它放在滚动条结束的位置吗？

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

我已经使用 jScrollPane 实现了它，但是使用 jScroll 后我无法水平调整大小。
demo http://i53.tinypic.com/906rk9.png

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案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

【讨论】：

上帝保佑你在这件事上节省了我的时间 :)

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

这对我有用

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

【讨论】：