欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js拖拽功能實(shí)現(xiàn)代碼解析

 更新時(shí)間:2016年11月28日 15:32:39   作者:簡(jiǎn)單成書  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文解決的問題:

1、怎樣在網(wǎng)頁(yè)中實(shí)現(xiàn)拖曳功能;

2、document.documentElementdocument.body的區(qū)別。
document.documentElement.clientWidth指整個(gè)html文檔的寬度,document.body.clientWidth的寬度。這兩者是不一樣的??梢栽赾onsole控制臺(tái)通過console.log(document.documentElement)和console.log(document.body)進(jìn)行測(cè)試。

3、getBoundingClientRect().leftoffsetLeft的區(qū)別。
getBoundingClientRect()用于獲取元素的left、top、right、bottom。offset獲取相對(duì)于父級(jí)的left和top。getBoundingClientRect()獲取相對(duì)于窗口的left、top、right、bottom。

4、e.clientX指的是鼠標(biāo)點(diǎn)相對(duì)于窗口的坐標(biāo)。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>彈窗</title>
 <style type="text/css">
  #mask {
   position: fixed;
   left:0;
   top:0;
   width:100%;
   height: 100%;
   background-color: hsla(250,100%,50%,0.6);
   display: none;
  }
  #popBox {
   position: absolute;
   background-color: #fff;
   width:200px;
   height: 200px;
   /*left:50%;
   top:50%;*/
   /*margin-top: -100px;
   margin-left: -100px;*/
  }
 </style>
</head>
<body>
 <button id="clickBtn">點(diǎn)擊</button>
 <div id="mask">
  <div id="popBox"></div>
 </div>
 <script type="text/javascript">
  var clickBtn = document.getElementById("clickBtn");
  var popBox = document.getElementById("popBox")
  var mask = document.getElementById("mask");
  clickBtn.onclick = function() {
   mask.style.display = "block";
   popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";
   popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";

  }
  popBox.onclick = function(e) {
   var e = e || window.event;//e指所有代碼的集合,通過它可以獲取事件的各種屬性。
   e.cancelBubble = true;//阻止事件冒泡,即點(diǎn)擊事件不會(huì)傳遞到mask這一層,意味著不會(huì)觸發(fā)點(diǎn)擊mask事件代碼。
  }
  mask.onclick = function() {
   mask.style.display = "none";
  }

  //拖拽 mousedown->mousemove->mouseup 
  popBox.onmousedown = function(e) {
   var e = e || window.event;
   var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于獲取元素的left、top、right、bottom。offset獲取相對(duì)于父級(jí)的left和top。getBoundingClientRect()獲取相對(duì)于窗口的left、top、right、bottom。
   var oX = e.clientX - pos.left;//clientX指相對(duì)于窗口的坐標(biāo)。
   var oY = e.clientY - pos.top;
   document.onmousemove = function(e) {
    var e = e || window.event;
    var oLeft = e.clientX - oX;
    var oTop = e.clientY - oY;
    popBox.style.left = oLeft + "px";
    popBox.style.top = oTop + "px";
    if (oLeft<0) {
     popBox.style.left = 0 + "px";
    };
    if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
     popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整個(gè)html文檔的寬度,document.body.clientWidth的寬度。這兩者是不一樣的??梢栽赾onsole控制臺(tái)通過console.log(document.documentElement)和console.log(document.body)進(jìn)行測(cè)試。


    }
    if (oTop<0) {
     popBox.style.top = 0 + "px";
    };
    if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
     popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";
    }

   }
   popBox.onmouseup = function() {
    document.onmousemove = null;
   }
  }
 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript如何實(shí)現(xiàn)圖片處理與合成

    JavaScript如何實(shí)現(xiàn)圖片處理與合成

    這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)圖片處理與合成,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • JavaScript實(shí)現(xiàn)瀑布流布局詳解

    JavaScript實(shí)現(xiàn)瀑布流布局詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-07-07
  • TypeScript聲明合并的實(shí)現(xiàn)

    TypeScript聲明合并的實(shí)現(xiàn)

    本文主要介紹了TypeScript聲明合并的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能

    JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能

    這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能,本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • javascript tabIndex屬性

    javascript tabIndex屬性

    圍繞表單的可訪問性與交互性上,各瀏覽器都下了很大工夫,比如fieldset與legend等用于增強(qiáng)區(qū)域感的元素,for,accessKey,defaultValue,maxlength,tabIndex等用于交互或提示的屬性。不過,今天只講tabIndex。
    2009-12-12
  • [轉(zhuǎn)]去百度面試的javascript 收獲

    [轉(zhuǎn)]去百度面試的javascript 收獲

    前兩天去了百度面試,1面是很順利,2面基本是被問暈問傻問成了個(gè)白癡。沒去之前,自己覺得自己的js還是可以的,但是被考官問的基本變成了白癡。
    2009-04-04
  • javascript獲取表格 td 中的內(nèi)容

    javascript獲取表格 td 中的內(nèi)容

    可以獲取html table中的td中的內(nèi)容。非常的不錯(cuò)。
    2009-07-07
  • JavaScript使用function定義對(duì)象并調(diào)用的方法

    JavaScript使用function定義對(duì)象并調(diào)用的方法

    這篇文章主要介紹了JavaScript使用function定義對(duì)象并調(diào)用的方法,實(shí)例分析了javascript中function定義及使用對(duì)象與方法的相關(guān)技巧,需要的朋友可以參考下
    2015-03-03
  • 大轉(zhuǎn)盤抽獎(jiǎng)小程序版 轉(zhuǎn)盤抽獎(jiǎng)網(wǎng)頁(yè)版

    大轉(zhuǎn)盤抽獎(jiǎng)小程序版 轉(zhuǎn)盤抽獎(jiǎng)網(wǎng)頁(yè)版

    這篇文章主要為大家詳細(xì)介紹了大轉(zhuǎn)盤抽獎(jiǎng)小程序版和網(wǎng)頁(yè)版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-01-01
  • JS中的Date()使用小結(jié)

    JS中的Date()使用小結(jié)

    Date() 日期對(duì)象是一個(gè)構(gòu)造函數(shù)必須使用new來調(diào)用創(chuàng)建我們的日期對(duì)象,本文給大家介紹JS中的Date()使用小結(jié),感興趣的朋友一起看看吧
    2024-01-01

最新評(píng)論