鼠標拖拽

一、效果
一個可以在屏幕上任意拖動的紅色愛心


愛心.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;
          }
        }
以上兩個函數效果一致
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 只記錄left，top同理。clientX：返回鼠標相對于瀏覽器的水平坐標；offsetLeft：返回當前對象距離...
    小菇涼大思想閱讀 927評論 0贊 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 27,642評論 1贊 45
  • 思路： 利用onmousedown事件實現拖拽。首先獲得鼠標橫坐標點和縱坐標點到div的距離，然后當鼠標移動后再用...
    zhangmz閱讀 965評論 0贊 48
  • 15.11.27遠離 遠離塵世的喧囂 遠離世俗的煩惱 走進山水之中 閉上眼聽 傾聽自然的聲音 聽風聲呼嘯 聽雷聲轟...
    閑垂散人閱讀 241評論 4贊 2
  • 對于生活在城市里的人來說，公交車從來都是很重要的，城市的面積越來越大，道路越來越寬，想要憑借著雙腳能夠到達的地方是...
    cyyyyyyyyyyy閱讀 558評論 0贊 1