javaｓｃｒｉｐｔ实现的一个简单鼠标拖动效果示例
本文演示了Javaｓｃｒｉｐｔ鼠标拖动的简单效果，供大家参考，具体分析如下：用鼠标拖动元素将其放置在Web上的任何地方都是很常见的。例如，许多博客模板可以通过自己拖动到相应的位置。
接下来，写一个简单的效果，可以用来拖动鼠标。
当鼠标被按下时，鼠标的当前位置与元素左边的距离之间的差值被记录下来。
当鼠标移动时，元素的位置被分配，它是鼠标的位置，减去差值。
当鼠标空闲时，让鼠标移动，鼠标释放null，使它们不再有任何动作。
点一点：
oevent.clientx - box.offsetleft disx =；
要确定拖动拖动时鼠标点在元素上的位置，从元素的左距中减去鼠标位置。
第二点：
box.style.left = oevent.clientx - disx +PX；
位置的元素拖动时，鼠标的当前位置减去了刚才的计算值。
好的，上面的代码：
非所有权文件
体{ margin: 0；padding: 0；高度：1500px；}
#箱{宽度：100px；身高：100px；背景：# 06c；位置：绝对的；}
在window.onload =函数（）{
VaR箱= document.getelementbyid（盒子）；
VaR disx = 0；
VaR Disy = 0；
box.onmousedown =功能（EVT）{
Var oevent = EVT window.event ||;
oevent.clientx - box.offsetleft disx =；
oevent.clienty - box.offsettop Disy =；
document.onmousemove =功能（EVT）{
无功oevent = EVT window.event | |；
box.style.left = oevent.clientx - disx +PX；
box.style.top = oevent.clienty - Disy +PX；
}
document.onmouseup =函数（）{
document.onmousemove = null；
document.onmouseup = null；
}
返回false；
}
}
鼠标拖动
进一步的改进，鼠标拖动上面没有限制，有时拖动窗外看看，在下面的限制下。
第一点如下：如果元素的左位置小于0，将其分配到0。如果它大于可见窗口的大小减去元素本身的宽度，则将其分配给可见窗口的宽度和元素本身的宽度之间的差异。
VaR bo1 = oevent.clientx - disx；
如果（bo1＜0）{
bo1 = 0；
} else if（bo1 >观念盒。offsetwidth）{
bo1 =观念- box.offsetwidth；
}
非所有权文件
身体{边缘：0；填充：0；}
#箱{宽度：100px；
身高：100px；
背景：# 06c；
位置：绝对；
}
在window.onload =函数（）{
VaR箱= document.getelementbyid（盒子）；
VaR disx = 0；
VaR Disy = 0；
box.onmousedown =功能（EVT）{
无功oevent = EVT window.event | |；
oevent.clientx - box.offsetleft disx =；
oevent.clienty - box.offsettop Disy =；
document.onmousemove =功能（EVT）{
无功oevent = EVT window.event | |；
VaR bo1 = oevent.clientx - disx；
无功boxt = oevent.clienty - Disy
VAR观念= document.documentelement.clientwidth document.body.clientwidth | |；
无功viewh = document.documentelement.clientheight document.body.clientheight | |；
如果（bo1＜0）{
bo1 = 0；
} else if（bo1 >观念盒。offsetwidth）{
bo1 =观念- box.offsetwidth；
}
如果（boxt＜0）{
boxt = 0；
} else if（boxt > viewh盒。offsetheight）{
boxt = viewh - box.offsetheight；
}
box.style.left = bo1 +PX；
box.style.top = boxt +PX；
}
document.onmouseup =函数（）{
document.onmousemove = null；
document.onmouseup = null；
}
返回false；
}
}
鼠标拖动
希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。