JqueryUI Resizable 几个场景的问题及解决

jQueryUI确实是很方便的前端UI控件，本文只介绍一些resizable功能的使用心得。

官网地址：http://jqueryui.com/resizable/

功能的需求是，在一个列表页面，点击某一条记录的时候，页面的右侧弹出Div显示这条记录的详情，Div高度与页面高度一致，位置固定（就是一个position:fixed;overflow:scroll;的Div），且要可手动拖动改变大小。

问题1：Div固定在页面右侧，resize时Div会跑到左边

我的Div样式大致是这样：

 

position:fixed;float:right;right:10px;width:500px;height:900px;

 显示效果是占据页面右边部分，且不随页面滚动条移动。要求可以拉住Div的左border进行resize。

 

resizable初始化：

$( "#resizable" ).resizable({ 
    handles: "w" 
});

 显示正常，但是拉住Div左border resize时，Div区域会跑到页面左边。记得当时在网上各种找，研究resizable插件，最后根据资料和自己的试验得到两个解决方法。

 

1.在Div上增加left:xxpx;属性，这样Div左border拉伸时Div位置会保持不变。

2.在resizable的resize事件上做操作

$( "#resizable" ).resizable({ 
        handles: "w" ,
        resize: function(event, ui) {
            $("#resizable").css("left", "");
        }
     });

 

resizable在resize时会计算Div的位置，这种方法是resize时去掉产生的left属性，这样也能达到Div位置不改变的效果。

 

方法1比较简单，但是我的情况肯定不行，在许多场景下，left也都是不固定的，所以我使用的是第二种。

问题2：当Div有滚动条时的异常

有时Div中会显示大量的信息，会需要滚动条，这很正常。但是resizable似乎不太喜欢滚动条，初始化之后，滚动条下拉一段，则新出现的Div左边缘不支持resize了。调试发现，resizable初始化的时候，在Div左border上会生成一个用于handle的div，鼠标选中此处区域进行拖拉，达到Div resize的效果。这个handle div的高度与最初Div的高度一致，但是滚动条下拉之后，这个handle div被滚动到上面了，新出现的左border上并没有handle div，自然也就不能resize了。了解到这个原因后，处理方法也很明了了。

解决方法.在Div外面嵌套一个div，外层div的大小固定且无滚动条，内层Div有滚动条，对外层div进行resizable，这样在下拉滚动条时，移动的是内层Div的滚动条，外层div的左border是保持不动的，自然也不会有问题2了。

当然也可以对handle div进行修改，让它位置不随滚动条改变。这个方法理论上可行，但我没试过，毕竟嵌套div的办法已经非常简易了。

问题3：定制可拖动区域，比如放到Div外面

resizable本身支持8拉伸方向，w,e,s,n,ws,wn,es,en,对应4个方向和Div的4个脚。在四个方向上，可以在border上拉伸，在4个脚上，则是在Div的角落里生成一个小三角。

经常会有需求，定制可拖动区域（即handle div），放到Div内部另一个元素上，或者到Div外面。jquery resizable提供了定制handle div的方法，但是对于Div外部是无效的（原谅我没有测试放在Div内部行不行……）。

resizable相关的样式有：.ui-resizable-handle，.ui-resizable-w，.ui-resizable-e，.ui-resizable-s,等等，.ui-resizable-handle是可拖动区域的样式，.ui-resizable-w等就是区域的位置。直接在css文件里修改上述样式就可以达到预期效果。

比如：

 

.ui-resizable-handle {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border: 1px solid #000000;    
}
.ui-resizable-w
{
     left:-50px;
     top:50%;
}

 下面是我写的一个完整的例子：http://jsfiddle.net/carey_zhao/2o2mbbse/

好容易下定决心总结一下，希望能帮助到有需要的人。