get the width,height,top,left of the big img,then you get the field the earth img is in.the X,Y of the earth img can be got by computing the width,height,top,left of the big img and the width,height,top,left of the earth img.it is easy,don't you think so???
定义事件句柄onmousemove，现在坐标减原坐标
onmouseup 释放事件，并完成一些工作
例子：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> how to make a drag division - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
<!--
body {
font-size:0.9em;
font-family:verdana;
background-color:appworkspace;
}
.myDiv {
border:4px solid #006699;
height:200px;
width:400px;
color:#003399;
padding:20px;
font-weight:bolder;
text-align:center;
background-color:#eeeeee;
}
.copyright
{
text-align: center;
font-size: 1em;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--function neverDragDivision(fObj) { with (this)
{
if (!fObj) return;
this.bDraged = false;
this.oDragOrig = fObj;
oDragOrig.style.cursor = "move";
oDragOrig.onmousedown = function()
{
var ofs = Offset(oDragOrig);
oDragOrig.style.position = "absolute";
oDragOrig.style.left = ofs.l;
oDragOrig.style.top = ofs.t;
oDragOrig.X = event.clientX - ofs.l;
oDragOrig.Y = event.clientY - ofs.t;
bDraged = true;
};
oDragOrig.onmousemove = function()
{
if (!bDraged) return;
oDragOrig.setCapture();
oDragOrig.style.left = event.clientX - oDragOrig.X;
oDragOrig.style.top = event.clientY - oDragOrig.Y; };
oDragOrig.onmouseup = function()
{
bDraged = false;
oDragOrig.releaseCapture();
};
function Offset(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
}};//-->
</SCRIPT>
</HEAD>
<BODY>
<table>
<tr>
<td>
<div class="myDiv">
http://www.never-online.net
<p>power by blueDestiny, never-online</p>
</div>
</td>
<td>
<div class="myDiv" style="width:450px">
<p>never-online, Everlasting love for angela.</p>
</div>
</td>
</tr>
</table>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" _fcksavedurl="http://www.never-online.net">http://www.never-online.net</a> </h4>
<SCRIPT LANGUAGE="JavaScript">
<!--
var aDivs = document.getElementsByTagName("DIV");
for (var i=0; i<aDivs.length; i++) {
new neverDragDivision(aDivs[i]);
}
//-->
</SCRIPT>
</BODY>
</HTML>