css部分
#gaga{
position:fixed;top:0;left:0;background:#f00;width:100px;height:100px;_position:absolute;cursor:move;
}
html部分<div id="gaga"></div>
javascript部分
/* 2013-4-2 尜尜制作 鼠标拖拽效果 * 1、要实现鼠标拖拽功能,就是三个事件 鼠标按下事件(onmousedown)、鼠标移动事件(onmousemove)、鼠标弹起事件(onmouseup); * 2、当鼠标按下的时候 获取鼠标点击的距离浏览器左边(clientX)和顶部(clientY)的位置; * 3、当鼠标按下的时候 获取被拖拽元素距离浏览器左边距离的位置(offsetLeft)和被拖拽元素距离浏览器顶部的位置(offsetTop); * 4、当鼠标在移动的时候把获取到的位置分别赋值给被拖拽元素的left和top; * 5、当改变浏览器窗口大小的时候要对被拖拽元素的做判断; * 6、当鼠标弹起的时候就清除鼠标按弹起事件(onmouseup)和鼠标移动事件(onmousemove)。 */ function getEvent( e ){ // 封装event return e || window.event; }; function preDef( event ){ // 判断低版本的火狐 封装 var e = getEvent( event ); if( typeof e.preventDefault != "undefined" ){ // W3C e.preventDefault(); }else{ // IE e.returnValue = false; }; }; function gaga(){ // 封装 var oDiv = document.getElementById("gaga"); // 获取被拖拽元素的ID var wid = document.documentElement.clientWidth; // 浏览器工作区域的宽度; var hei = document.documentElement.clientHeight; // 浏览器工作区域的高度; oDiv.onmousedown = function( e ){ // 当按下鼠标的时候 var e = getEvent( e ); preDef( e ); // 判断低版本的火狐 在被拖拽元素是空的时候出现的问题 var _this = this; // 这个this是代表oDiv var offX = e.clientX - _this.offsetLeft; // e.clientX是点击的位置距离浏览器左边的距离 _this.offsetLeft是点击的元素距离浏览器左边的距离 var offY = e.clientY - _this.offsetTop; // e.clientX是点击的位置距离浏览器顶部的距离 _this.offsetLeft是点击的元素距离浏览器顶部的距离 document.onmousemove = function( e ){ // 当鼠标移动的时候 document代表全局 var e = getEvent( e ); var left = e.clientX - offX; // 移动中oDiv的距离浏览器左边的位置 var top = e.clientY - offY; // 移动中oDiv的距离浏览器顶部的位置 if( top < 0 ){ // 如果拖拽元素拖拽的范围超出了浏览器的顶部的范围的时候 top = 0; }else if( top > hei - _this.offsetHeight ){ // 如果拖拽元素拖拽的范围超出了浏览器的低部的范围的时候 top = hei - _this.offsetHeight; // 得到被拖拽元素实际的top位置就是 浏览器工作区域的范围宽度减去被拖拽元素本身的高度 } if( left < 0 ){ // 如果拖拽元素拖拽的范围超出了浏览器的左边的范围的时候 left = 0; }else if( left > wid - _this.offsetWidth ){ // 如果拖拽元素拖拽的范围超出了浏览器的右边的范围的时候 left = wid - _this.offsetWidth; // 得到被拖拽元素实际的left位置就是 浏览器工作区域的范围宽度减去被拖拽元素本身的宽度 } _this.style.left = left + "px"; _this.style.top = top + "px"; }; document.onmouseup = function(){ // 当鼠标弹起的时候清除鼠标移动和鼠标弹起事件 this.onmousemove = null; this.onmouseup = null; }; }; }; gaga(); window.onresize = function(){ // 当改变浏览器窗口大小的时候 var oDiv = document.getElementById("gaga"); // 获取被拖拽元素的ID var wid = document.documentElement.clientWidth; // 浏览器工作区域的宽度; var hei = document.documentElement.clientHeight; // 浏览器工作区域的高度; if( oDiv.offsetLeft > wid - oDiv.offsetWidth ){ // 当被拖拽的元素距离浏览器左边的位置大于 浏览器工作区域的宽度减去被拖拽元素本身的宽度的时候 oDiv.style.left = wid - oDiv.offsetWidth + "px"; }else{ // 重新定位浏览器的工作区域 gaga(); }; if( oDiv.offsetTop > hei - oDiv.offsetHeight ){ // 当被拖拽的元素距离浏览器顶部的位置大于 浏览器工作区域的高度减去被拖拽元素本身高度的时候 oDiv.style.top = hei - oDiv.offsetHeight + "px"; }else{ // 重新定位浏览器的工作区域 gaga(); }; };