javascript鼠标拖动的div模块
<html>
<head>
<style type="text/css">
#divmove {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 300px;
}
</style>
</head>
<body>
<div class=divmove id=divmove>
</div>
</body>
<script type="text/javaScript">
var flag = false;
var lastx = 0;
var lasty = 0;
var cleft = 0;
var ctop = 0;
function mousedown(e)
{
if(e.target.className.match("divmove"))
{
flag=true;
var moveObject=document.getElementById('divmove');
cleft=moveObject.offsetLeft;
ctop=moveObject.offsetTop;
lastx=e.clientX;
lasty=e.clientY;
}
}
function mousemove(e)
{
var moveObject=document.getElementById("divmove");
if(flag)
{
moveObject.style.left=cleft+(e.clientX-lastx)+'px';
moveObject.style.top=ctop+(e.clientY-lasty)+'px';
}
}
function mouseup(e)
{
flag=false;
lastx=0;
lasty=0;
x=0;
y=0;
}
document.addEventListener("mousedown",mousedown);
document.addEventListener("mousemove",mousemove);
document.addEventListener("mouseup",mouseup);
</script>
</html>