html 可拖动宽度的div方法

2019独角兽企业重金招聘Python工程师标准>>>

效果演示：http://www.gbtags.com/gb/rtreplayerpreview/569.htm

HTML：

鼠标移动到矩形分割线


    

    

JS：

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.width() - ui.element.outerWidth(),
                divTwo = ui.element.next(),
                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
                divTwo.width(divTwoWidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});
    

CSS：

@import url('http://cdn.gbtags.com/jqueryui/1.10.4/css/jquery-ui.min.css');

*{
  font-family: 'microsoft yahei',Arial,sans-serif;
}

.wrap {
    width: 100%;
    border: 1px solid #999;
    font-size: 0;
}

h4{
  font-weight: normal;
}

.resizable {
    width: 50%;
    height: 120px;
    padding: 0.5em;
    background-color: orange;
    display: inline-block;
}

.resizable2 {
    background-color: #08a3ca;
}

.ui-resizable-e { 
    cursor: e-resize; 
    width: 16px; 
    right: -5px; 
    top: 0; 
    bottom: 0; 
    background-color: #666;
}

 

转载于:https://my.oschina.net/u/2391658/blog/1535792