首页 > 代码库 > 鼠标拖拽模块
鼠标拖拽模块
<!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>
*{margin:0;padding:0}
#box{background-color:#CCF; height:300px; top:100px; left:100px; width:300px; position:absolute;}
</style>
</head>
<body>
<script>
window.onload=function()
{
var oBox=document.getElementById(‘box‘);
oBox.onmousedown=function(m) {
if(window.event) m = window.event;
oBox.style.cursor = "pointer";
var diffX = m.clientX - oBox.offsetLeft;
var diffY = m.clientY - oBox.offsetTop;
document.onmousemove=function(e){
if(window.event) e = window.event;
var EX = e.clientX;
var EY = e.clientY;
oBox.style.left = parseInt( e.clientX) -parseInt(diffX) + "px";
oBox.style.top = parseInt( e.clientY) - parseInt(diffY) + "px";
}
oBox.onmouseup=function()
{
document.onmousemove=null; //删除事件
};
};
};
</script>
<div id="box"></div>
</body>
</html>
鼠标拖拽模块