javascript實作簡單的滑鼠拖曳效果實例_javascript技巧
- WBOY原創
- 2016-05-16 16:05:031199瀏覽
本文實例講述了javascript實現簡單的滑鼠拖曳效果。分享給大家供大家參考。具體分析如下：
用滑鼠拖曳一個元素，放到網頁的任一位置上，這是很常見的，例如許多部落格範本版塊位置可以自己拖曳到對應位置。
下面先寫一個簡單的可以實現滑鼠拖曳的效果。
當滑鼠按下的時候，記錄滑鼠目前位置和元素左邊距離的差值。
當滑鼠移動的時候，給元素的位置賦值，就是滑鼠的位置，減去剛才的差。
當滑鼠放開的時候，給滑鼠移動和滑鼠放開賦值null，讓它們不要再有任何動作。
要點一：
disx = oevent.clientX - box.offsetLeft;
要確定拖曳的時候滑鼠點在元素的位置，就是滑鼠位置減去元素的左邊距離。
要點二：
box.style.left = oevent.clientX - disx + "px";
拖曳時元素的位置，滑鼠的目前位置減去前面剛計算的值。
好了，上碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</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>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>
再改進一下，上面的滑鼠拖曳沒有限制範圍，有時會拖曳視窗外面看不見了。下面就限制下範圍
要點一：如下，如果元素的左邊位置小於0時，給它賦值為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>无标题文档</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>鼠标拖动</h1>
<div id="box"></div>
</body>
</html>
希望本文所述對大家的javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn