首页 > 代码库 > 拖拽小例
拖拽小例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style >
#div{
height: 200px;
width: 350px;
position: absolute;
left:100px;
top:100px;
background: red;
}
.title{
background: blue;
height: 50px;
width: 330px;
margin: 10px;
}
</style>
<script type="text/javascript">
//定义一个方法来获取calssName,因为document.getElementsByClassName至少在IE10之前是不支持的，所以这里需要封装一个函数来获取className.
function getClass(clsName,parent){
var oParent = parent?document.getElementById(parent):document;//因为第二个参数parent是可选的参数，所以这里要判断一下是否传过来了参数parent，如果没有传过来就是document
var eles = [];
var elements = oParent.getElementsByTagName("*");//这里是获取父元素oParent下的所有节点
for(var i=0;i<elements.length;i++){
if(elements[i].className == clsName)
eles.push(elements[i]);//将className等于传过来的clsName放入eles
}
return eles;
}
window.onload=drag;
function drag(){
var oTitle = getClass(‘title‘,‘div‘)[0];
oTitle.onmousedown = fnDown;
}
function fnDown(event){//这里的event是鼠标按下时的事件对象
event = event || window.event;//处理兼容问题
var oDiv = document.getElementById(‘div‘);
//其中event.clientX表示的是鼠标按下时鼠标的横坐标，event.clientY表示的是鼠标按下时的纵坐标，oDivoffsetLeft表示的是面板（当前的外层div框）离浏览器最左边的距离
var disX = event.clientX - oDiv.offsetLeft;//光标按下时光标和面板之间的距离
var disY = event.clientY - oDiv.offsetTop;
document.onmousemove = function(event){//这里的event是鼠标移动的事件对象
event = event || window.event;
fnMove(event,disX,disY);
}
document.onmouseup = function(){
document.onmousemove = null;//当鼠标按上时取消移动事件
document.onmouseup = null;
}
}
function fnMove(event,posX,posY){//这里的event是鼠标移动的事件对象
var l = event.clientX - posX;
var t = event.clientY - posY;
var oDiv = document.getElementById("div");
winW = document.documentElement.clientWidth || document.body.clientWidth;//同样是解决浏览器兼容问题，document.documentElement.clientWidth表示的是body的宽度
winH = document.documentElement.clientHight || document.body.clentHight;
maxW = winW - oDiv.offsetWidth;//设置div框移动的最大距离，offsetWidth表示的是当前面板的宽度
maxH = winH - oDiv.offseHight;
if(l<0){
l = 0;
} else if(l>maxW){
l = maxW;
}
if(t<0){
t = 0;
}else if(t>maxH){
t = maxH;
}
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
}
</script>
</head>
<body>
<div class="div" id="div">
<div class="title">
</div>
</div>
</body>
</html>
拖拽小例