<html>
<head><title>鼠标拖动</title></head>
<body>
<div id="id_oDivTarget" style="height:100%;width:100%;background-color:blue;">
</div>
<div id="id_odiv" style="cursor:move;height:100px;width:100px;position:absolute;top:10px;left:10px;z-index:2;border:solid 1px black;background-color:red;">
</div>
<script>
var odiv = document.getElementById("id_odiv");
var oDivTarGet = document.getElementById("id_oDivTarget");
odiv.onmousedown = function(e)
{
var et = e?e:window.event;
var iDiffx = et.clientX-odiv.offsetLeft;
var iDiffy = et.clientY-odiv.offsetTop
document.body.onmousemove = function(e)
{
var et = e?e:window.event;
oDivTarGet.innerHTML = et.clientX;
odiv.style.left = et.clientX-iDiffx;
odiv.style.top = et.clientY-iDiffy;
}
}
odiv.onmouseup = function()
{
document.body.onmousemove = null;
}
</script>
</body>
</html>
<head><title>鼠标拖动</title></head>
<body>
<div id="id_oDivTarget" style="height:100%;width:100%;background-color:blue;">
</div>
<div id="id_odiv" style="cursor:move;height:100px;width:100px;position:absolute;top:10px;left:10px;z-index:2;border:solid 1px black;background-color:red;">
</div>
<script>
var odiv = document.getElementById("id_odiv");
var oDivTarGet = document.getElementById("id_oDivTarget");
odiv.onmousedown = function(e)
{
var et = e?e:window.event;
var iDiffx = et.clientX-odiv.offsetLeft;
var iDiffy = et.clientY-odiv.offsetTop
document.body.onmousemove = function(e)
{
var et = e?e:window.event;
oDivTarGet.innerHTML = et.clientX;
odiv.style.left = et.clientX-iDiffx;
odiv.style.top = et.clientY-iDiffy;
}
}
odiv.onmouseup = function()
{
document.body.onmousemove = null;
}
</script>
</body>
</html>