html 拖拽修改div,html 可拖动宽度的div方法

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;

}