简单的拖拽

简单的拖拽，有超出边界界限的检测。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{margin:0; padding: 0;}
    body{ position: relative;}
    #div{ width:100px; height:100px; background:red; position:absolute; left:0; top:0;}    
    </style>
</head>
<body>
    <div id="div"></div>
    <script>
        function range(iNum,iMax,iMin){//检测 是否超出边界
            if( iNum > iMax ){
                return iMax;
            }
            else if( iNum < iMin ){
                return iMin;
            }
            else{
                return iNum;
            }   
        }    
        function drag(obj){ //拖拽
            var disX = 0,
                disY = 0;
            obj.onmousedown = function(ev){
                var ev = ev || window.event;
                disX = ev.clientX - obj.offsetLeft;
                disY = ev.clientY - obj.offsetTop;
                if (obj.setCapture) obj.setCapture();
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    var L = range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
                    var T = range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );
                    // var L = ev.clientX - disX;
                    // var T = ev.clientY - disY;                    
                    obj.style.left = L + 'px';
                    obj.style.top = T + 'px';
                };
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if (obj.releaseCapture) obj.releaseCapture();
                };
                return false;
            }
        }
        window.onload = function(){
            var obj = document.getElementById('div');
            drag(obj);
        }
    </script>
</body>
</html>
相关推荐
