首页 > 代码库 > javascript 拖拽
javascript 拖拽
拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#drag{height:100px;width:100px;background:orange;position:absolute;}
</style>
</head>
<body>
<div id="drag"></div>
</body>
</html>
<script>
window.onload = function(){
//获取拖拽元素
var oDrag = document.getElementById(‘drag‘);
//当元素按下的时候执行函数
oDrag.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oDrag.offsetLeft;
var disY = oEvent.clientY - oDrag.offsetTop;
//判断浏览器是否支持setCapture这个属性，如果支持那么直接使用兼容IE版本的方式
if (oDrag.setCapture) {
oDrag.onmousemove = Move;
oDrag.onmouseup=Up;
//IE下阻止默认事件
oDrag.setCapture();
}else{
document.onmousemove = Move;
document.onmouseup = Up;
//移动事件的函数
function Move(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
//防止div被拖出可视区外
//左右可视区
if ( l < 0 ) {
l = 0;
}else if ( l > document.documentElement.clientWidth - oDrag.offsetWidth) {
l = document.documentElement.clientWidth - oDrag.offsetWidth;
};
//上下可视区
if ( t < 0 ) {
t = 0;
}else if ( t > document.documentElement.clientHeight - oDrag.offsetHeight) {
t = document.documentElement.clientHeight - oDrag.offsetHeight;
};
//div的位置
oDrag.style.left = l +‘px‘;
oDrag.style.top = t +‘px‘;
}
//抬起的时候执行的函数
function Up(){
//清掉移动和抬起的事件
this.onmousemove = null;
this.onmouseup = null;
//IE所独有的
if (this.releaseCapture) {
this.releaseCapture();
}
}
//防止默认事件
return false;
}
}
};
</script>
知识点补充：
setCapture() 是让一个元素可以捕获所有的鼠标事件。
可以用alert()或者releaseCapture()，打断当前的鼠标捕获。
setCapture()可以用在对DIV的拖动效果上。就不用给body设置onmousemove事件了，直接给DIV设置，然后通过setCapture()让它捕获所有的鼠标事件。
不过setCapture()方法，只有IE支持。