快捷導(dǎo)航

JavaScript簡單實(shí)現(xiàn)彈出拖拽窗口（一）

更新時(shí)間：2016年06月17日 10:59:39 作者：我的前端之路

這篇文章主要為大家詳細(xì)介紹了JavaScript簡單實(shí)現(xiàn)彈出拖拽窗口的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享JavaScript彈出拖拽窗口的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

需求說明：
1、點(diǎn)擊頁面按鈕，彈出窗口；
2、要有半透明背景遮罩；
3、彈出窗口圓角，窗口半透明，但內(nèi)容不透明；帶陰影；
4、窗口可拖動(dòng)；
5、拖動(dòng)停止之后，滾動(dòng)頁面時(shí)窗口位置不動(dòng)；
6、可以使用jQuery；
7、有關(guān)閉按鈕；
進(jìn)一步功能具體描述：
點(diǎn)按鈕，會(huì)有一個(gè)可以拖拽的浮層出來。
有一個(gè)背景遮罩，支持標(biāo)題欄的拖拽，在標(biāo)題欄以外，在標(biāo)題欄區(qū)域之外的區(qū)域拖拽是沒有效果的，拖拽功能限定，他的拖拽功能被限定在可是可視區(qū)域內(nèi)。
拖曳的思路：
獲取鼠標(biāo)的位置，鼠標(biāo)移動(dòng)的時(shí)候，獲取鼠標(biāo)的位置，獲取x軸y軸，賦給窗口的x軸y軸，窗口弄成絕對定位。鼠標(biāo)松開的時(shí)候把這個(gè)事件取消掉。
拖拽的實(shí)現(xiàn)原理：
鼠標(biāo)移動(dòng)的時(shí)候，拿鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)位置不斷更新浮層的position。
1.鼠標(biāo)在浮層元素按下的時(shí)候，把這個(gè)浮層元素標(biāo)記為可以拖動(dòng)。
2.鼠標(biāo)移動(dòng)的時(shí)候，我們先檢測一下浮層元素標(biāo)記的波動(dòng)是不是可以拖動(dòng)。如果是的話，讓浮層跟著鼠標(biāo)一起移動(dòng)，不是的話就忽略。
3.鼠標(biāo)松開的時(shí)候標(biāo)記浮層元素不可以拖動(dòng)
4.js拖拽主要用到了鼠標(biāo)三個(gè)事件：mousedown、mousemove、mouseup。
mousedown：鼠標(biāo)按下
mouseup：鼠標(biāo)松開
mousemove：鼠標(biāo)移動(dòng)
備注：mousedown和click的區(qū)別：鼠標(biāo)點(diǎn)擊的整個(gè)過程會(huì)發(fā)生 mousedown→mouseup→click三個(gè)事件， click在最后鼠標(biāo)松開之后才會(huì)發(fā)生。
說到這里，我們就不得不講一下鼠標(biāo)事件。
下面簡單的講一下鼠標(biāo)事件：
(1)click事件
(2)dbclick事件
(3)mousedown事件
(4)mouseup事件
(5)mouseenter事件
(6)mouseover事件
(7)mouseleaver事件
(8)mouseout事件
解釋：（鼠標(biāo)事件的解釋說明選自w3school）
（1）click事件：click事件于用戶在元素敲擊鼠標(biāo)左鍵，并在相同元素上松開左鍵時(shí)觸發(fā)。
（2） dbclick事件：當(dāng)雙擊元素時(shí)，會(huì)發(fā)生 dblclick 事件。當(dāng)鼠標(biāo)指針停留在元素上方，然后按下并松開鼠標(biāo)左鍵時(shí)，就會(huì)發(fā)生一次 click。在很短的時(shí)間內(nèi)發(fā)生兩次 click，即是一次 double click 事件。
實(shí)例：
當(dāng)雙擊按鈕時(shí)，隱藏或顯示元素：

 $(document).ready(function(){
   $("button").dblclick(function(){
     $("p").slideToggle();
   });
 });

(3)mousedown事件：當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生mousedown 事件。與 click 事件不同，mousedown 事件僅需要按鍵被按下，而不需要松開即可發(fā)生。

 $(document).ready(function(){
   $("button").mousedown(function(){
    $("p").slideToggle();
  });
});

(4)mouseup事件：當(dāng)在元素上放松鼠標(biāo)按鈕時(shí)，會(huì)發(fā)生 mouseup 事件。
與 click 事件不同，mouseup 事件僅需要放松按鈕。當(dāng)鼠標(biāo)指針位于元素上方時(shí)，放松鼠標(biāo)按鈕就會(huì)觸發(fā)該事件。

 $(document).ready(function(){
  $("button").mouseup(function(){
     $("p").slideToggle();
   });
});

(5)mouseenter事件：當(dāng)鼠標(biāo)指針穿過元素時(shí)，會(huì)發(fā)生 mouseenter 事件。該事件大多數(shù)時(shí)候會(huì)與 mouseleave 事件一起使用。
注釋：與 mouseover 事件不同，只有在鼠標(biāo)指針穿過被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件。如果鼠標(biāo)指針穿過任何子元素，同樣會(huì)觸發(fā) mouseover 事件。
(6)mouseover事件：當(dāng)鼠標(biāo)指針位于元素上方時(shí)，會(huì)發(fā)生 mouseover 事件。該事件大多數(shù)時(shí)候會(huì)與 mouseout 事件一起使用。
注釋：與 mouseenter 事件不同，不論鼠標(biāo)指針穿過被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件。只有在鼠標(biāo)指針穿過被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件。

$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseout(function(){
    $("p").css("background-color","#E9E9E4");
  });
});

mouseenter 與 mouseover 的不同

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
  x=0;
  y=0;
  $(document).ready(function(){
     $("div.over").mouseover(function(){
        $(".over span").text(x+=1);
     });
     $("div.enter").mouseenter(function(){
        $(".enter span").text(y+=1);
     });
  });
</script>
</head>
<body>
  <p>不論鼠標(biāo)指針穿過被選元素或其子元素，都會(huì)觸發(fā) mouseover 事件。</p>
  <p>只有在鼠標(biāo)指針穿過被選元素時(shí)，才會(huì)觸發(fā) mouseenter 事件。</p>
  <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
  　　<h2 style="background-color:white;">被觸發(fā)的 Mouseover 事件：<span></span></h2>
　　</div>
  <div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
  　　<h2 style="background-color:white;">被觸發(fā)的 Mouseenter 事件：<span></span></h2>
  </div>
</body>
</html>

(7)mouseleaver事件：當(dāng)鼠標(biāo)指針穿過元素時(shí)，會(huì)發(fā)生 mouseenter 事件。
該事件大多數(shù)時(shí)候會(huì)與 mouseleave 事件一起使用。
注釋：與 mouseout 事件不同，只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。如果鼠標(biāo)指針離開任何子元素，同樣會(huì)觸發(fā) mouseout 事件。
(8)mouseout事件
當(dāng)鼠標(biāo)指針從元素上移開時(shí)，發(fā)生 mouseout 事件。
該事件大多數(shù)時(shí)候會(huì)與 mouseover 事件一起使用。
注釋：與 mouseleave 事件不同，不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件。只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。
請看下面例子的演示。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
　　x=0;
　　y=0;
　　$(document).ready(function(){
 　　　　$("div.out").mouseout(function(){
  　　　　　　$(".out span").text(x+=1);
 　　　　});
 　　　　$("div.leave").mouseleave(function(){
  　　　　　　$(".leave span").text(y+=1);
 　　　　});
　　});
</script>
</head>
<body>
　　<p>不論鼠標(biāo)指針離開被選元素還是任何子元素，都會(huì)觸發(fā) mouseout 事件。</p>
　　<p>只有在鼠標(biāo)指針離開被選元素時(shí)，才會(huì)觸發(fā) mouseleave 事件。</p>
　　<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
　　　　<h2 style="background-color:white;">被觸發(fā)的 Mouseout 事件：<span></span></h2>
　　</div>
　　<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
　　　　<h2 style="background-color:white;">被觸發(fā)的 Mouseleave 事件：<span></span></h2>
　　</div>
</body>
</html>