基於jquery 拖拽

来源：互联网发布：邪恶漫画知子伯母全集编辑：程序博客网时间：2024/06/05 03:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

#header{
    background-color: wheat;
    width:100%;
    height: 100px;
}

#dragbar{float:left;
   background-color:SaddleBrown;
   height:100%;
   float: right;
   width: 15px;
   cursor: col-resize;
   display:inline-block;
}
</style>
<script type="text/javascript" language="JavaScript">
    var bwidth = 0;
    $(document).ready(function () {
       $("#dragbar").height($("#sidebar").height());
       $("#main").css("width", $("body").width() -$("#sidebar").width());
       $("#sidebar").css("max-width", $("body").width()- 300);

        var i = 0;
        $('#dragbar').mousedown(function (){
            bwidth =$("body").width();
           $(document).mousemove(function (e) {

               $('#sidebar').css("width", e.pageX);
               $("#main").css("width", bwidth -$("#sidebar").width());
            });
        });
        $(document).mouseup(function () {
           $(document).unbind('mousemove');
        });
        $(window).resize(function () {
           $("#dragbar").height($("#sidebar").height());
$("#sidebar").css("max-width",$("body").width() - 300);
           $("#main").css("width", $("body").width() -$("#sidebar").width());

        });
    });
</script>

    <title>TestingPasteHTML.com</title>
</head>
<body style="margin:0;">
<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <div id="position"style="float:left;"></div>
    <div id="dragbar">
    </div>

</div>
<div id="main" style="min-width:300px;">
    main
</div>
<div id="footer">
    footer
</div>

</body>
</html>

0 0