<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js拖拽效果</title>
</head>
<body>
<script type="text/javascript">
var oDiv = document.getElementById('login');
oDiv.onmousedown = function(e){
var event = event || window.event;//window.event兼容IE,当事件发生时有效
var diffX = event.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离
var diffY = event.clientY - oDiv.offsetTop;
document.onmousemove = function(e){//需设为document对象才能作用于整个文档
var e = e||window.event;
oDiv.style.left = e.clientX - diffX +'px';//style.left表示所选对象的边框到浏览器左侧距离
oDic.style.top = e.client - diffY +'px';
}
document.onmouseup = function(){
oDiv.onmousemove = null;//清除鼠标释放时的对象移动方法
oDiv.onmouseup = null;
}
}
</script>
</body>
</html>