本文实例讲述了javascript实现简单的鼠标拖动效果。分享给大家供大家参考。具体分析如下：
用鼠标拖动一个元素，放到网页的任意一个位置上，这是很常见的，例如很多博客模板版块位置可以自己拖动到相应位置。
下面先写一个简单的可以实现鼠标拖动的效果。
当鼠标按下的时候，记录鼠标当前位置和元素左边距离的差值。 当鼠标移动的时候，给元素的位置赋值，就是鼠标的位置，减去刚才的差值。 当鼠标放开的时候，给鼠标移动和鼠标放开赋值null，让它们不要再有任何动作。
要点一：
Box.offsetLeft;
要确定拖动的时候鼠标点在元素的位置，就是鼠标位置减去元素的左边距离。
要点二：
Box.style.left = oevent.clientX - disx + "px";
拖动时元素的位置，鼠标的当前位置减去前面刚计算的值。
好了，上代码：
鼠标拖动
Box">
再改进一下，上面的鼠标拖动没有限制范围，有时会拖动窗口外面看不见了。下面就限制下范围
要点一：如下，如果元素的左边位置小于0时，给它赋值为0，如果大于可视窗大小减去元素本身的宽度的，给它赋值为 可视窗大小减元素本身宽度的差值。
Boxl = oevent.clientX - disx;
if(Boxl < 0){
boxl =0;
}else if(boxl > vieww - Box.offsetWidth){
Boxl = vieww - Box.offsetWidth;
}
无<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>文档
@H_403_30@
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;
}
}
鼠标拖动
Box">
希望本文所述对大家的javascript程序设计有所帮助。
