鼠标拖拽
一、效果
一个可以在屏幕上任意拖动的红色爱心
爱心.gif
二、代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
- Author(s): Administrator
- Date: 2019-05-06 20:08:38
- Description:
-->
<head>
<title>mouseMoveDemo</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script>
<style type="text/css">
.love {
/* 爱心 */
position: absolute;/*relative、flow*/
left:35px;
}
.love:before {
content: "";
width: 70px;
height: 100px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
}
.love:after {
content: "";
width:70px;
height: 100px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: -24px;
}
</style>
</head>
<body>
<div id="love" class="love"></div>
<script type="text/javascript">
nui.parse();
$("#love").mousedown(function(e){
debugger;
var isMove = true;
var love = $("#love")[0];//获取div对象
var love_before = window.getComputedStyle(love, "before");//获取dom对象的css伪元素
var love_after = window.getComputedStyle(love, "after");//获取dom对象的css伪元素
var window_width = window.innerWidth;//网页Iframe的宽度
var window_height = window.innerHeight;//网页Iframe的高度
window.outerHeight;//浏览器的高度
window.outerWidth;//浏览器的宽度
window.screenTop = window.screenY;//浏览器相对显示屏左上角的x坐标位置
window.screenLeft = window.screenX;//浏览器相对显示屏左上角的y坐标位置
var love_div_x = e.pageX - $("#love").offset().left;//鼠标离div左上角的x坐标长度
var love_div_y = e.pageY - $("#love").offset().top;//鼠标离div左上角的y坐标长度
var love_before_width = love_before.width;//dom对象的css伪元素的宽度
var love_before_width_real = love_before_width.substr(0,love_before_width.length-2);
var love_before_height = love_before.height;//dom对象的css伪元素的高度
var love_before_height_real = love_before_height.substr(0,love_before_height.length-2);
$(document).mousemove(function(e){
var love_local_x = $("#love").offset().left;//dom对象左上角离Iframe网页左上角x坐标的距离长度
var love_local_y = $("#love").offset().top;//dom对象左上角离Iframe网页左上角y坐标的距离长度
var left = e.pageX -love_div_x;//dom元素与鼠标同步运动时left应该设置的值
var top = e.pageY - love_div_y;//dom元素与鼠标同步运动时top应该设置的值
if(isMove){
//确保dom元素不会移除网页可视区域
left = left>parseInt(window_width)-parseInt(love_before_width_real)-30?parseInt(window_width)-parseInt(love_before_width_real)-30:left;
left = left<35?35:left;
top = top>parseInt(window_height)-parseInt(love_before_height_real)-10?parseInt(window_height)-parseInt(love_before_height_real)-10:top;
top = top<-5?-5:top;
$("#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;")
}
}).mouseup(function(){
isMove = false;
});
});
</script>
</body>
</html>
三、知识点总结
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;
}
}
以上两个函数效果一致
