鼠标拖拽

一、效果
一个可以在屏幕上任意拖动的红色爱心

爱心.gif

二、代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" session="false" %>
    





    
    
    


    



    

三、知识点总结
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;
          }
        }
以上两个函数效果一致