拖拽div大小

最新推荐文章于 2024-06-26 10:30:02 发布

weixin_33905756

最新推荐文章于 2024-06-26 10:30:02 发布

阅读量190

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/dslcode/blog/1591271

版权

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

<!DOCTYPE>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="useJs/1.8.2/jquery-1.8.2.min.js" ></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body {
   padding: 0;
   margin: 0;
}
#box{
       width:610px;
       height:300px;
       margin:30px auto;
       position:relative;
       background:red;
   }
#left{
       width:300px;
       height:300px;
       margin-right:10px;
       background:#630;
       float:left;
   }
#right{
       width:300px;
       height:300px;
       background:pink ;
       float:right;
   }
#drag{
       width:8px;
       height:298px;
       border:1px solid black;
       cursor:e-resize;
       position:absolute;
       top:0;
       left:300px;

   }

</style>
<script>
$(function(){
   var $box=$("#box"),$left=$("#left"),$right=$("#right"),$drag=$("#drag"),
   $boxWidth=$box.width(),
   start=Math.ceil(($(window).width()-$boxWidth)/2) ,
   end=start+$boxWidth-10;
   $drag.on({
       mousedown:function(e){
                   $(document).mouseup(function(){$(document).unbind()})
                   $(document).mousemove(function(e){
                       var liftSize=(e.pageX)-start
                       if(liftSize<=0){
                           $drag.css("left",0);
                           $left.width(0);
                       $right.width(600)
                           return false
                       }
                       else if(liftSize>=$boxWidth-10){
                           $drag.css("left",600);
                           $left.width(600);
                       $right.width(0)
                           return false
                       }
                       $left.width(liftSize);
                       $right.width($box.width()-liftSize-10)
                       $drag.css("left",liftSize);
                   })
               }
   })
})
</script>
<title>无标题文档</title>
</head>
<body>
<div id="box">
<div id="drag">
</div>
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>