鼠标拖拽和吸附功能 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0; padding: 0; background: black;}
#div1{width:120px; height: 120px; background: gray; position: absolute;}
</style>

</head>
<body>
<div id = "div1"></div>
<script type="text/javascript">
    var oDiv = document.getElementById('div1');

    var disX = 0;
    var disY = 0;
    
    oDiv.onmousedown = function(ev){
        var oEvent = ev||event;

        disX = oEvent.clientX - oDiv.offsetLeft;
        disY = oEvent.clientY - oDiv.offsetTop;

        //oDiv.onmousemove = function(ev){
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            var l = oEvent.clientX - disX;
            var t = oEvent.clientY - disY;

            if(l<30)
            {
                l = 0;//为了不让div移出浏览器
            }
            else if(l>(document.documentElement.clientWidth-oDiv.offsetWidth))
            {
                //让div不能从浏览器右边出去  浏览器可视区的宽度-div的宽
                l = document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            else if(t>(document.documentElement.clientHeight-oDiv.offsetHeight))
            {
                t = document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            else if (t<30)
            {
                t = 0;
            }

            oDiv.style.left = l + 'px';
            oDiv.style.top = t + 'px';

        }
            //oDiv.onmouseup = function(ev){
            document.onmouseup = function(){
            //oDiv.onmousemove = null;//清空当次鼠标移动事件(=null解除事件绑定函数)
            document.onmousemove = null;
            document.onmouseup = null;
        }
            return false;//阻止火狐浏览器拖拽空div的默认bug事件和谷歌、IE9的默认事件
    }

</script>
</body>
</html>

 

posted @ 2017-01-19 16:20  萤子  阅读(956)  评论(0)    收藏  举报