jQuery拖拽的彈出層效果

admin發表於2018-01-09
jQuery

分享一段程式碼例項，它實現了點選按鈕彈出一個層的功能，並且可以使用滑鼠拖動層的移動。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#show{
  width:100px;
  height:30px;
  line-height:30px;
  margin:0px auto;
  background-color:red;
}
#dialog{
  display:none;
  padding:8px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var _move=false;
var _x,_y;
$(document).ready(function(){
  $("#show").click(function(event){
    var str="螞蟻部落歡迎您";
    $("#txt").html(str);
    var wid = $(window).width();
    var hei = $(window).height();
 
    var left = (wid - 400)/2+"px";
    var top = (hei - 200)/2+"px";
 
    $("#dialog").css({
      "z-index":"5",
      "position":"absolute",
      "display":"block",
      "width":"400px",
      "height":"200px",
      "left":left,
      "top":top,
      "background":"#EEEEEE",
      "color":"red",
      "border":"1px solid red"
    })
  })
   
  $("#close").click(function(event){
    $("#dialog").slideUp("slow");
  })
 
  $("#dialog").mousedown(function(e){
    _move=true;
    _x=e.pageX-parseInt($("#dialog").css("left"));
    _y=e.pageY-parseInt($("#dialog").css("top"));
  });
   
  $(document).mousemove(function(e){
    if(_move){
      var x=e.pageX-_x;
      var y=e.pageY-_y;
      $("#dialog").css({top:y,left:x});
    }
  }).mouseup(function(){
    _move=false;
  });
});
</script>
</head>
<body>
<div id="show">點選彈出層</div>
<div id="dialog">
  <div id="txt"></div>
  <br/>
  <div style="text-align:right;padding-right:50px;">
    <input id='close' type="button" value="關閉此彈出層">
  </div>
</div>
</body>
</html>

彈出的層可以進行拖動效果並且在視窗中居中，下面介紹一下實現過程。

一.程式碼註釋：

（1）.var _x,_y，宣告兩個變數，用來儲存座標值。

（2）.var _move=false，宣告一個變數，並賦值為false，用來標識彈出層是否可以拖動。

（3）.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

（4）.$("#show").click(function(event){})，為id屬性值為show的元素註冊click事件處理函式。

（5）.var str="螞蟻部落歡迎您"，宣告一個字串作為顯示的內容。

（6）.$("#txt").html(str)，將字串寫入id屬性值為txt的元素中。

（7）.var wid = $(window).width()，獲取視窗的寬度。

（8）.var hei = $(window).height()，獲取視窗的高度。

（9）.var left = (wid - 400)/2+"px"，設定彈出視窗的left屬性值，可以讓彈出視窗水平居中。

（10）.var top = (hei - 200)/2+"px"，設定彈出視窗的top屬性值，可以讓彈出視窗垂直居中。

（11）.$("#dialog").css({})，設定彈視窗的一些樣式屬性。

（12）.$("#close").click(function(event){}),為關閉按鈕註冊click事件處理函式。

（13）.$("#dialog").slideUp("slow")，將彈出框收起，也就是隱藏彈出框。

（14）.$("#dialog").mousedown(function(e){})，為id屬性值為dialog的元素註冊mousedown事件處理函式。

（15）._move=true，將變數的值設定為true，用以標識彈出視窗是可以拖動的。

（16）._x=e.pageX-parseInt($("#dialog").css("left"))，獲取當滑鼠按下時，滑鼠指標距離彈出視窗左邊緣的距離。

（17）._y=e.pageY-parseInt($("#dialog").css("top"))，獲取當滑鼠按下時，滑鼠指標距離彈出視窗上邊緣的距離。

（18）.$(document).mousemove(function(e){})，為document物件註冊mousemove事件處理函式，之所以要註冊在document上而不是彈出層上，這樣可以利用事件冒泡現象防止滑鼠指標移出彈出層後，導致拖動無效的情況。

（19）.if(_move)，判斷是否可以拖動。

（20）.var x=e.pageX-_x，獲取拖動過程中彈出層的left屬性值。

（21）.var y=e.pageY-_y，獲取拖動過程中彈出層的top屬性值。

（22）.$("#dialog").css({top:y,left:x})，設定left和top屬性值。

（23）.mouseup(function(){_move=false;}),為彈出層註冊mouseup事件處理函式，當滑鼠鬆開的時候，將_move變數值設定為false，也就是不能夠拖動了，當然這裡使用是鏈式呼叫方式。

二.相關閱讀:

（1）.html()參閱jQuery html()一章節。

（2）.width()參閱jQuery width()一章節。 

（3）.height()參閱jQuery height()一章節。 

（4）.css()參閱jQuery css()一章節。

（5）.click事件參閱jQuery click事件一章節。

（6）.slideUp()參閱jQuery slideUp()一章節。 

（7）.mousedown參閱jQuery mousedown事件一章節。 

（8）.pageX屬性參閱jQuery event.pageX一章節。 

（9）.parseInt()參閱javascript parseInt()一章節。 

（10）.mouseup事件參閱jQuery mouseup事件一章節。

相關文章