dywidth_panel

html


<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div class="boxs">
        <div class="dragBox" style="background-color:#555;" data-defaultWidth="300">
            左面板
        </div>
        <div class="dragLine"></div>
        <div class="dragBox" style="width:500px;" data-defaultWidth="500">
            右面版
        </div>
    </div>
</body>
</html>

css


.boxs{
        width: 1000px;
        height: 300px;
        margin: 0 auto;
    }

    .dragBox{
        width: 300px;
        height: 300px;
        background-color: #CCC;
        float: left;
        overflow:hidden;
        text-align: center;
        color: #FFF;
    }
    .dragLine{
        width: 2px;
        height: 300px;
        background-color: #000;
        float: left;
        cursor: ew-resize;
        position: absolute;
    }

javascript



// 拖动最大值
var boundary = 0;
// 默认不可以拖动
var isDown = false;
$(function(){

    // 可以拖动的边界
    boundary = $(".dragBox:last").offset().left + $(".dragBox:last").width();

    // 初始化拖动线条的位置 = 线条前一个div的x+width
    $(".dragLine").each(function(){
        $(this).offset({left: $(this).prev().offset().left + $(this).prev().width()  });
        // 把该线条初始位置保存在属性id内
        $(this).attr("id",$(this).offset().left);
    });

    // 拖动线条鼠标按下事件
    $(".dragLine").mousedown(function(e){
        isDown = true;
    });

    // 鼠标离开事件
    $(".dragLine").mouseup(function(e){
        isDown = false;
    });

    $(document).mousemove(function(e){
    // 开始拖动
        if(isDown){
            drag(e,$(".dragLine"));
        }
    });

});

// 拖动效果
function drag(e,obj){
    if(e.which == 1){
        // 鼠标的X,Y
        var mousePos = getMousePos(e);
        // 限制不能拖出区域
        if(boundary >= mousePos.x && mousePos.x >= $(".dragBox:first").offset().left - 1){
            // 移动拖动线条的位置
            $(obj).offset({left:mousePos.x });
            // 获取到拖动的宽度
            var width = mousePos.x - $(obj).attr("id");
            // 如果往右拖动 , 那么 , 线条前面一个DIV的宽度需要 - 拖动距离 ; 后面一个DIV宽度需要 + 拖动距离
            if(mousePos.x < $(obj).attr("id")){
                // 改变线条前面一个DIV的宽度
                $(obj).prev().width( parseInt($(obj).prev().attr("data-defaultWidth")) + width );
                // 改变线条后面一个DIV的宽度
                $(obj).next().width( parseInt($(obj).next().attr("data-defaultWidth")) - width);
            }else{
                // 改变线条前面一个DIV的宽度
                $(obj).prev().width( mousePos.x -  $(obj).prev().offset().left );
                // 改变线条后面一个DIV的宽度
                $(obj).next().width(parseInt($(obj).next().attr("data-defaultWidth")) - width);
            }
        }
    }
}


// 获取鼠标当前坐标
function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    return { 'x': x, 'y': y };
}

 
使用 HTML5拖拽API 实现
Demo 下载