分享一下最近写的一个拖拽的小效果
1.嗯，要实现的一个效果就是把div从一个位置拖到另一个位置，怎么实现呢?
<i>首先，要拖div，先把鼠标按下去，拖着div走，然后鼠标松开。这样，完了。
<ii>我们都知道，按下鼠标这个事件就是onmousedown，当鼠标按下，获取到鼠标此时的位置到div的left和top的距离。 odiv.onmousedown = function(ev)
{
var oevent = ev||event;
var disX = oevent.clientX（鼠标此时的横坐标）-odiv.offsetLeft;
var disY = oevent.clientY（鼠标此时的纵坐标）-odiv.offsetTop;
<ii>当鼠标松开时再获取鼠标此时位置，根据上一步求得的鼠标到div 的left，top距离，推算出div此时应该在的位置，
document.onmousemove = function(ev)//当鼠标移动时
{
var oevent = ev||event;
var l = oevent.clientX - disX ;
var t = oevent.clientY - disY ;
odiv.style.left = l+'px';
odiv.style.top = t +'px';
<iii>当鼠标抬起来时，就关掉鼠标移动事件和鼠标抬起事件
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
}
当然，<ii><iii>建立在<i>的基础之上，也就是说，只有鼠标按到div上才有onmousemove、onmouseup事件的发生，即后面两个事件要写到onmousedown函数里。
js源码：window.onload = function()
{
var odiv = document.getElementById('div1');
odiv.onmousedown = function(ev)
{
var oevent = ev||event;
var disX = oevent.clientX-odiv.offsetLeft;
var disY = oevent.clientY-odiv.offsetTop;
document.onmousemove = function(ev){
//这里的document也可以写成odiv，写成document的原因时，有时候
//div太小，鼠标拖的太快，鼠标跑出div，div就停下来了，等鼠标再次上来，再拖
var oevent = ev||event;
var l = oevent.clientX - disX ;
var t = oevent.clientY - disY ;
if(l<0)
{l=0;}
else if(t<0)
{t = 0;}
else if(l>document.documentElement.clientWidth-odiv.offsetWidth)
{
l=document.documentElement.clientWidth-odiv.offsetWidth;
}
else if(t>document.documentElement.clientHeight-odiv.offsetHeight)
{
t = document.documentElement.clientHeight-odiv.offsetHeight;
}
odiv.style.left = l+'px';
odiv.style.top = t +'px';
}
document.onmouseup = function()
{
document.onmousemove = null;
document.onmouseup = null;
}
return false;//阻止火狐的bug
}
}