可以拖動的div塊程式碼例項

antzone發表於2017-03-13

本章節分享一段程式碼，也就是標題中所說的拖動div移動程式碼，在很多實際應用中都有這樣的效果，儘管不可能只單單有一個拖動功能,不過可以作為參考衍伸之用，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.moveBar{
  position:absolute;
  width:250px;
  height:300px;
  background:#666;
  border:solid 1px #000;
}
#banner{
  background:#52CCCC;
  cursor: move;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $('#banner').mousedown(function(event){ 
    var isMove = true; 
    var abs_x = event.pageX - $('div.moveBar').offset().left; 
    var abs_y = event.pageY - $('div.moveBar').offset().top; 
    $(document).mousemove(function(event){ 
      if(isMove){ 
        var obj = $('div.moveBar'); 
        obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
      } 
    }).mouseup(function(){ 
      isMove = false; 
    }); 
  }); 
}); 
</script>
</head>
<body>
<div class="moveBar">
  <div id="banner">按住此位置可以拖動</div>
  <div class="content"></div>
</div>
</body>
</html>

相關文章