javascript拖拽时改变盒子的尺寸(宽高)

本博文纯属个人理解、可能与专业知识有出入!!!!!

首先拖拽行为一共触发了三个事件:

鼠标按下—onmousedown
鼠标移动—onmousemove
鼠标弹起—onmouseup


二、事件发生—–>计算事件触发时各种数据的数值和变化

获取对象

var Box=document.getElementById('box');

鼠标点下触发事件:

Box.onmousedown=function(ev){};

立刻获取点击当前的数据:

var iEvent=ev || event; 
var disX=iEvent.clientX;
var disY=iEvent.clientY;
var disW=Box.offsetWidth;
var disH=Box.offsetHeight;
var OFFLeft=Box.offsetLeft;
var OOFTop=Box.offsetTop;

设置感应区为20px;并给边框添加易于识辨的样式;
判断拖动时的数据变化:

if(iEvent.clientX>Box.offsetLeft+Box.offsetWidth-20){
    Box.style.cursor='w-resize';
    box.style.borderRight='20px solid coral';
    b='right';
};
if(iEvent.clientX<Box.offsetLeft+20){
    Box.style.cursor='w-resize';                        
    box.style.borderLeft='20px solid #de5145';
    b='left';
}
if(iEvent.clientY<Box.offsetTop+20){
    Box.style.cursor='s-resize';
    box.style.borderTop='20px solid #f05b4e';
    b='top';
}
if(iEvent.clientY>Box.offsetTop+Box.offsetHeight-20){
    b='bottom';
    Box.style.cursor='s-resize';
    box.style.borderBottom='20px solid coral';
}

鼠标移动触发事件:

document.onmousemove=function(ev){};

判断各种条件下的数据变化;

var iEvent=ev || event; 
if(b=='right'){
    Box.style.width=disW+(iEvent.clientX-disX)+'px';
}
if(b=='left'){
    Box.style.width=disW-(iEvent.clientX-disX)+'px';
    Box.style.left=OFFLeft+(iEvent.clientX-disX)+'px';
}
if(b=='top'){
    Box.style.height=disH-(iEvent.clientY-disY)+'px';
    Box.style.top=OOFTop+(iEvent.clientY-disY)+'px';
}
if(b=='bottom'){
    Box.style.height=disH+(iEvent.clientY-disY)+'px';
}

最后鼠标弹起触发事件、并清除鼠标按下之后的事件:

document.onmouseup=function(){
    document.onmousemove=null;
    Box.style.cursor='pointer';
    box.style.border='20px solid #17a05e';
};


全部代码:


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 400px;
                height: 220px;
                background-color: #17a05e;
                border: 20px solid #17a05e;
                position: absolute;
                left: 40%;
                top: 40%;
                cursor: pointer;
                color: crimson;
            }
        style>
        <script type="text/javascript">
            window.onload=function(){
                var Box=document.getElementById('box');
                var b='right';
                Box.onmousedown=function(ev){
                    var iEvent=ev || event; 
                    var disX=iEvent.clientX;
                    var disY=iEvent.clientY;
                    var disW=Box.offsetWidth;
                    var disH=Box.offsetHeight;
                    var OFFLeft=Box.offsetLeft;
                    var OOFTop=Box.offsetTop;
                    if(iEvent.clientX>Box.offsetLeft+Box.offsetWidth-20){
                        Box.style.cursor='w-resize';
                        box.style.borderRight='20px solid coral';
                        b='right';
                    };
                    if(iEvent.clientX20){
                        Box.style.cursor='w-resize';                        
                        box.style.borderLeft='20px solid #de5145';
                        b='left';
                    }
                    if(iEvent.clientY20){
                        Box.style.cursor='s-resize';
                        box.style.borderTop='20px solid #f05b4e';
                        b='top';
                    }
                    if(iEvent.clientY>Box.offsetTop+Box.offsetHeight-20){
                        b='bottom';
                        Box.style.cursor='s-resize';
                        box.style.borderBottom='20px solid coral';
                    }
                    document.onmousemove=function(ev){
                            var iEvent=ev || event; 
                            if(b=='right'){
                                Box.style.width=disW+(iEvent.clientX-disX)+'px';
                            }
                            if(b=='left'){
                                Box.style.width=disW-(iEvent.clientX-disX)+'px';
                                Box.style.left=OFFLeft+(iEvent.clientX-disX)+'px';
                            }
                            else if(b=='top'){
                                Box.style.height=disH-(iEvent.clientY-disY)+'px';
                                Box.style.top=OOFTop+(iEvent.clientY-disY)+'px';
                            }
                            if(b=='bottom'){
                                Box.style.height=disH+(iEvent.clientY-disY)+'px';
                            }
                    };
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        Box.style.cursor='pointer';
                        box.style.border='20px solid #17a05e';
                    };                  
                };
            };
        script>
    head>
    <body>
        <div id="box">div>
    body>
html>

每日清新
javascript拖拽时改变盒子的尺寸(宽高)_第1张图片

作者:王华桥

你可能感兴趣的:(个人心得,javascript,鼠标,函数,对象,移动)