js 鼠标拖拽元素

基础知识

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

实现效果

web qq页面上的元素基本都可以拖拽，交互性很强，增强了体验，拖拽功能带来的好处显而易见。

思路：

用户点击元素，然后拖动，实际上是onmousedown和onmousemove两个函数的嵌套。

1、用户点击元素。需要记录到鼠标点击位置的距离，因为在拖动过程中最好是保持鼠标和元素的相对距离，而不是鼠标一直处于元素左上角，用过拖拽应该都能体会。

由于没有斜线的说法，所以是保存横向距离distX和纵向距离distY两个变量。

2、拖动元素。这时候就要发挥之前保存的距离了，元素的位置是由left和top决定的，在运动过程中是不断变化的，是需要我们计算的，计算方法就是：鼠标的位置-元素边距到鼠标的距离。就成功可以拖动了。

3、虽然可以拖动了，但是元素可能会被疯狂的用户拖出可视区，可能就找不到了，所以我们最好加一个限定，不能拖出可视区。

左边距的控制好说，判断使left=0；右边距=0是一个想法，具体的实现还是要根据左边距来控制，首先得到可视区宽度（document.documentElement.clientWidth），减去元素宽度就是元素的left值。

css

<style type="text/css">  
    #div{  
        background: red;  
        width: 100px;  
        height: 100px;  
        position: absolute;  
    }  
</style>

[javascript]

<script type="text/javascript">  
    window.onload=function(){  
        var oDiv=document.getElementById('div');  
        var distX=0;  
        var distY=0;  
        oDiv.onmousedown=function(ev){  
            var oEvent=ev||event;  
            distX=oEvent.clientX-oDiv.offsetLeft;   //获取边界到鼠标的距离  
            distY=oEvent.clientY-oDiv.offsetTop;  
            document.onmousemove=function(ev){  
                var oEvent=ev||event;  
                var x=oEvent.clientX-distX;  
                var y=oEvent.clientY-distY;  
                if(x<0){  
                    x=0;  
                }  
                if(y<0){  
                    y=0;  
                }  
                if(x>(document.documentElement.clientWidth-oDiv.offsetWidth))  
                {  
                    x=document.documentElement.clientWidth-oDiv.offsetWidth;  
                }  
                oDiv.style.left=x+'px';    //根据鼠标位置相对定位，得到left，top值  
                oDiv.style.top=y+'px';  
            }  
            document.onmouseup=function(){  
                document.onmousemove=null;  
                document.onmouseup=null;  
            }  
        }  
                  
    }  
</script>

[html]

<body>  
    <div id="div"></div>  
</body>