快捷導(dǎo)航

javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果實(shí)例

更新時(shí)間：2015年04月10日 10:49:00 作者：jingangel

這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果,實(shí)例分析了javascript鼠標(biāo)拖動(dòng)效果的相關(guān)要點(diǎn)與實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)拖動(dòng)效果。分享給大家供大家參考。具體分析如下：

用鼠標(biāo)拖動(dòng)一個(gè)元素，放到網(wǎng)頁(yè)的任意一個(gè)位置上，這是很常見(jiàn)的，例如很多博客模板版塊位置可以自己拖動(dòng)到相應(yīng)位置。

下面先寫(xiě)一個(gè)簡(jiǎn)單的可以實(shí)現(xiàn)鼠標(biāo)拖動(dòng)的效果。

當(dāng)鼠標(biāo)按下的時(shí)候，記錄鼠標(biāo)當(dāng)前位置和元素左邊距離的差值。
當(dāng)鼠標(biāo)移動(dòng)的時(shí)候，給元素的位置賦值，就是鼠標(biāo)的位置，減去剛才的差值。
當(dāng)鼠標(biāo)放開(kāi)的時(shí)候，給鼠標(biāo)移動(dòng)和鼠標(biāo)放開(kāi)賦值null，讓它們不要再有任何動(dòng)作。

要點(diǎn)一：

disx = oevent.clientX - box.offsetLeft;

要確定拖動(dòng)的時(shí)候鼠標(biāo)點(diǎn)在元素的位置，就是鼠標(biāo)位置減去元素的左邊距離。

要點(diǎn)二：

box.style.left = oevent.clientX - disx + "px";

拖動(dòng)時(shí)元素的位置，鼠標(biāo)的當(dāng)前位置減去前面剛計(jì)算的值。

好了，上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
body{margin:0; padding:0; height:1500px;}
#box{width:100px; height:100px; background:#06c; position:absolute;}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  box.style.left = oevent.clientX - disx + "px";
  box.style.top = oevent.clientY - disy + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠標(biāo)拖動(dòng)</h1>
<div id="box"></div>
</body>
</html>

再改進(jìn)一下，上面的鼠標(biāo)拖動(dòng)沒(méi)有限制范圍，有時(shí)會(huì)拖動(dòng)窗口外面看不見(jiàn)了。下面就限制下范圍

要點(diǎn)一：如下，如果元素的左邊位置小于0時(shí)，給它賦值為0，如果大于可視窗大小減去元素本身的寬度的，給它賦值為可視窗大小減元素本身寬度的差值。

var boxl = oevent.clientX - disx;
if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
body{margin:0; padding:0;}
#box{width:100px;
height:100px;
background:#06c;
position:absolute;
}
</style>
<script>
window.onload = function(){
 var box = document.getElementById("box");
 var disx =0;
 var disy = 0;
 box.onmousedown = function(evt){
 var oevent = evt || window.event;
 disx = oevent.clientX - box.offsetLeft;
 disy = oevent.clientY - box.offsetTop;
 document.onmousemove = function(evt){
  var oevent = evt || window.event;
  var boxl = oevent.clientX - disx;
  var boxt = oevent.clientY - disy
  var vieww = document.documentElement.clientWidth || document.body.clientWidth;
  var viewh = document.documentElement.clientHeight || document.body.clientHeight;
  if(boxl < 0){
  boxl =0;
  }else if(boxl > vieww - box.offsetWidth){
  boxl = vieww - box.offsetWidth;
  }
  if(boxt < 0){
  boxt =0;
  }else if(boxt > viewh - box.offsetHeight){
  boxt = viewh- box.offsetHeight;
  }
  box.style.left = boxl + "px";
  box.style.top = boxt + "px";
 }
 document.onmouseup = function(){
  document.onmousemove = null;
  document.onmouseup = null;
 }
 return false;
 }
}
</script>
</head>
<body>
<h1>鼠標(biāo)拖動(dòng)</h1>
<div id="box"></div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: