JavaScript经典案例之按下拖拽、跟随鼠标移动

￡神魔★判官ぃ 2021-07-24 21:46 375阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="GBK">
        <title></title>
        
        <style>
        	.out{
        		position: absolute;
        		border: 1px solid #ddd;
        		width: 500px;
        	}
        	.title{
        		background-color:black;
        		height: 30px;
        		color: white
        	}
        </style>
    </head>
    <body>
        <div id="out_div" class="out">
            <div id="title_div" class="title">
                <strong>标题</strong>
            </div>
            <div style="height: 300px;">
                这是内容
            </div>
        </div>
    <script>
    	(function(){
    		document.getElementById("title_div").onmousedown=drag;
    		/* 鼠标拖动 */
    	 	/*
             * 分析：
             * 获取鼠标实时移动的坐标；m_move_x,m_move_y
             * 鼠标按下时的坐标；m_down_x,m_down_y
             * div的坐标；dx,dy
             * div的新坐标；ndx,ndy
             * 最大边界maxX,maxY
             * 鼠标相对位移 nx,ny
             */
    
            var isDown = false;//记录鼠标状态
            var move_div;//要操作的div对象
            var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,ndx,ndy,maxX,maxY,nx=0,ny=0;
    
            //鼠标按下
            function drag(e){
            	var e = e || event;
                move_div = document.getElementById("out_div");
                isDown = true;
    
                //获取鼠标按下时坐标
                m_down_x = e.clientX;
                m_down_y = e.clientY;
                
                //鼠标按下时绑定 鼠标移动和释放事件
                document.onmousemove=move;
                document.onmouseup=up;
            }
            //鼠标移动
            function move(e){
    			 var e = e || event;
                //鼠标按下时移动才触发
                if(isDown && move_div){
    				 //实时更新div的坐标
    	            dx = move_div.offsetLeft;
    	            dy = move_div.offsetTop;
    	            //获取鼠标移动实时坐标
    	            m_move_x = e.clientX;
    	            m_move_y = e.clientY;
    	           
    	            nx = m_move_x-m_down_x;
    	            ny = m_move_y-m_down_y;
    	            
    	            ndx = dx+nx;
    	            ndy = dy+ny;
    	            
    	            m_down_x = m_move_x;
    	            m_down_y = m_move_y;
    
    				//设置拖动的边界
    				maxX = window.screen.availWidth-1-move_div.offsetWidth;
    				maxY = window.screen.availHeight-1-move_div.offsetHeight;
    				if(ndx<=0){
    					ndx=1;
    				}
    				if(ndy<=0){
    					ndy=1;
    				}
    				if(ndx>=maxX){
    					ndx=maxX;
    				}
    				if(ndy>=maxY){
    					ndy=maxY;
    				}
    				
                    //把新div坐标值赋给div对象
                    move_div.style.left = ndx+"px";
                    move_div.style.top = ndy+"px";
                }
    
            }
    
            //鼠标释放
            function up(e){
                isDown = false;
                move_div= null;
            }
            
    	})()
    </script>
    </body>
    </html>