jquery 实现div边界拖拽控制大小,左右两边同时变化

1.html

<div id="container">
    <!-- Left side -->
    <div id="left"> This is the left side's content! </div>
    <!-- Right side -->
    <div id="right">
        <!-- Actual resize handle -->
        <div id="handle"></div> This is the right side's content!
    </div>
</div>

2.css

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#container {
    width: 100%;
    height: 100%;
    /* Disable selection so it doesn't get annoying */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
#container #left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 100px;
    background: red;
}
#container #right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    background: blue;
}
#container #handle {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

3.js

$(function () {

var isResizing = false,
    lastDownX = 0;

var container = $('#container' ), left = $('#left' ), right = $('#right' ), handle = $('#handle' ); handle.on('mousedown', function (e) { isResizing = true ; lastDownX = e.clientX; }); $(document).on('mousemove', function (e) { // we don't want to do anything if we aren't resizing. if (! isResizing) return ; var offsetRight = container.width() - (e.clientX - container.offset().left); left.css('right' , offsetRight); right.css('width' , offsetRight); }).on('mouseup', function (e) { // stop resizing isResizing = false ; });});