一、效果
一个可以在屏幕上任意拖动的红色爱心
二、代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" %>
mouseMoveDemo
三、知识点总结
3.1、获取dom对象的css伪元素通过window.getComputedStyle(love, "before")的方式获取；
3.2、window.outerHeight;//浏览器的高度
window.outerWidth;//浏览器的宽度
window.innerWidth;//网页Iframe的宽度
window.innerHeight;//网页Iframe的高度
window.screenTop = window.screenY;//浏览器相对显示屏左上角的x坐标位置
window.screenLeft = window.screenX;//浏览器相对显示屏左上角的y坐标位置
3.3、设置dom元素设置css属性：$("#love").css({"left":left,"top":top});
或者document.getElementById("love").style.cssText="left:"+left+"px;top:"+top+"px;";
或者document.getElementById("love").setAttribute("style", "left:"+left+"px;top:"+top+"px;")
3.4、var e = window.event获取到页面事件
e.clientX =e.pageX=当前网页窗口鼠标相对窗口左上角的X坐标位置(绝对位置，即不管网页本身是否伸缩，计算的是物理的鼠标位置相对左上角的X坐标位置)
e.clientY=e.pageY=当前网页窗口鼠标相对窗口左上角的Y坐标位置(同上，绝对位置)
e.offsetX=e.layerX=当前网页窗口鼠标相对窗口左上角的X坐标位置(相对位置，即网页中可能存在横向或纵向的滚动条，本处计算的是绝对位置加上滚动条滚动的位置，例如绝对位置为200，然后横向滚动条向右滚动了100，则结果为300)
e.offsetY=e.layerY=当前网页窗口鼠标相对窗口左上角的Y坐标位置(同上，相对位置位置)
e.screenX=鼠标位置相对屏幕左上角的X坐标位置
e.screenY=鼠标位置相对屏幕左上角Y坐标位置
3.5、一个position为absolute的dom元素，里面包含的元素位置会自动随着dom元素的位置变动而变动
3.6、背景图片的设置：background-image:url(../images/透明提示框01.png);
background-repeat:no repeat;
background-size:100% 100%;//自适应占满
3.7、获取body元素：document.getElementsByTagName('body')[0]；
3.8、js创建dom对象：var newDiv = document.createElement("div");
newDiv.setAttribute("class", "dialoge");
newDiv.addEventListener("click", function(){alert(123);});//给对象添加点击事件
newDiv.setAttribute("style", "left:"+x+"px;top:"+y+"px;");
document.getElementsByTagName('body')[0].appendChild(context1);
3.9、js销毁对象：document.getElementsByTagName('body')[0].removeChild(document.getElementById("caililiang01"));//从body中销毁id为caililiang01的dom对象
四、封装的函数
函数用来把ID为id的div设置为可移动（注意该div的position属性必须为position:absolute）
function setDIVMoved(id){//把ID为id的div设置为可移动（注意该div的position属性必须为position:absolute）
$("#"+id).mousedown(function(e){
var isMove = true;//鼠标是否在移动的标志
var temp = $("#"+id)[0];//获取到div对象
var window_width = window.innerWidth;//网页Ifram的宽度
var window_height = window.innerHeight;//网页Ifram的高度
var div_x = e.pageX - $("#"+id).offset().left;//鼠标点击的位置相对于div左上角x轴坐标长度
var div_y = e.pageY - $("#"+id).offset().top;//鼠标点击的位置相对于div左上角y轴坐标长度
var div_width = temp.offsetWidth;//div对象的宽度
var div_height = temp.offsetHeight;//div对象的高度
$(document).mousemove(function(e){
var div_local_x = $("#"+id).offset().left;//div的左上角相对于网页左上角x坐标的长度
var div_local_y = $("#"+id).offset().top;//div的左上角相对于网页左上角y坐标的长度
//var x1 = parseInt(div_width)+parseInt(div_local_x);//div的右下角相对于网页左上角x坐标的长度
//var y1 = parseInt(div_height)+parseInt(div_local_y);//div的右下角相对于网页左上角y坐标的长度
var left = e.pageX -div_x;//算出的div左上角相对于网页左上角x坐标的长度
var top = e.pageY -div_y;
if(isMove){
//div不能超过窗口的右边
left = left>parseInt(window_width)-parseInt(div_width)?parseInt(window_width)-parseInt(div_width):left;
//div不能超过窗口的左边
left = left<1?1:left;
//div不能超过窗口的下边
top = top>parseInt(window_height)-parseInt(div_height)?parseInt(window_height)-parseInt(div_height):top;
//div不能超过窗口的上边
top = top<1?1:top;
$("#"+id).css({"left":left,"top":top});
}
}).mouseup(function(){
isMove=false;
});
});
}
函数二：
function setDIVMoved2(obj){
obj.onmousedown=function(e){
var oe=e||window.event;
var $this=this;
var l=oe.clientX-$this.offsetLeft;
var t=oe.clientY-$this.offsetTop;
document.onmousemove=function(e){
var oe=e||window.event;
var ol=oe.clientX-l;
var ot=oe.clientY-t;
if(ol<0) ol=0;
if(ot<0) ot=0;
if(ot>document.documentElement.clientHeight-$this.offsetHeight) ot=document.documentElement.clientHeight-$this.offsetHeight;
if(ol>document.documentElement.clientWidth-$this.offsetWidth) ol=document.documentElement.clientWidth-$this.offsetWidth;
$this.style.left=ol+"px";
$this.style.top=ot+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
if($this.releaseCapture) $this.releaseCapture();
}
if($this.setCapture){
$this.setCapture();
}
if(oe.preventDefault) oe.preventDefault();
else oe.returnValue=false;
return false;
}
}
以上两个函数效果一致