zhangax2008
管理员
管理员
  • UID1
  • 粉丝0
  • 关注0
  • 发帖数37
阅读:3961回复:0

div拖动改变大小,拖动DIV改变div大小

楼主#
更多 发布于:2020-08-13 16:54
<!DOCTYPE html>


<html>


<head>


    <title></title>


    <style type="text/css">


    .outer{


        width: 100px;


        height:200px;


        border:2px solid red;


    }


    .inner{


        width:100%;


        height:100%;


        /*border:1px solid #000;*/


    }


    .outer:hover{


        cursor: s-resize;


    }


    .inner:hover{


        cursor: default;        


    }


    </style>


</head>


<body>


<div id="moveBarBox" class="outer"  onmousedown="startDrag()">


    <div class="inner" >


    </div>


</div>


<script type="text/javascript">


    var finalheight = 200,finalwidth = 200; //最后的高度


    var he = 200,wi = 200; //初始高度


    var dragable = false;//默认不可拖拽


    var oldY = '';//记录第一次的鼠标位置
 var oldX = '';//记录第一次的鼠标位置


    var startDrag = function(event){


        dragable = true;


        var e=event?event:window.event;


        oldY = e.pageY;
 oldX = e.pageX;
  //记录第一次的鼠标位置


    };


    var unDrop = function(){


        dragable = false;


        window.event? window.event.cancelBubble = true : e.stopPropagation();


    };


    var endDrop = function(){


        if(dragable){


            finalheight = he;
 finalwidth = wi;


            dragable = false;            


        };


    };


    document.onmouseup=function(){


        endDrop();


    };


    document.onmousemove=function(event){


        


        if(dragable){


            var e=event?event:window.event;


            box = document.getElementById('moveBarBox');


            console.log(box);


            he =  e.pageY - oldY  + parseInt(finalheight);
 wi =  e.pageX - oldX  + parseInt(finalwidth);


            //鼠标的位移 + div的最后高度 = div的新高度


            //向上拉  he =  oldY - e.pageY  + parseInt(finalheight);


            //向下拉  he =  e.pageY - oldY  + parseInt(finalheight);


            if(dragable){


                if(he<120 || he==120){//div最低高度


                    box.style.height = '120px';he = '120px';


                     return;


                }


                if(he>400 || he==400){//div最高高度


                    box.style.height = '400px';he = '400px';return;


                }


                box.style.height = he + 'px';
 box.style.width = wi + 'px';


            };


        };


    };


</script>
游客


返回顶部