如何任意托动某个东西然后提取他的坐标???

Give you a example:
<html>
<head>
<script>
Object=null;
function MouseDown()
{
    Object = event.srcElement.parentElement.style;
    cx = event.offsetX;
    cy = event.offsetY;
}function MouseUp()
{
    Object = null;
}function MouseMove()
{
    if(Object)
    {
        Object.pixelLeft = event.clientX - cx + document.body.scrollLeft;
        Object.pixelTop = event.clientY - cy + document.body.scrollTop;
        return false;
    }
}document.onmousedown=MouseDown;
document.onmouseup=MouseUp;
document.onmousemove=MouseMove;
</SCRIPT>
</head>
<body>
<div id="spades" style="position:absolute;left:150;top:200;">
<img src="123.jpg"  height=250 >
</div>
</body>
</html>

解决方案 »

  1.   

    谢谢~~我现在用你给我的以下代码,但我里面如果要放多张图片,我想问一下如何分别知道每张图片被移动后的坐标地址,谢谢例如:
    <html>
    <head>
    <script>
    Object=null;
    function MouseDown()
    {
        Object = event.srcElement.parentElement.style;
        cx = event.offsetX;
        cy = event.offsetY;
    }function MouseMove()
    {
        if(Object)
        {
            Object.pixelLeft = event.clientX - cx + document.body.scrollLeft;
            Object.pixelTop = event.clientY - cy + document.body.scrollTop;
            return false;
        }
    }function MouseUp()
    {
        Object = null;
    }document.onmousedown=MouseDown;
    document.onmousemove=MouseMove;
    document.onmouseup=MouseUp;
    </SCRIPT>
    </head>
    <body>
    <div id="spades" style="position:absolute;left:0;top:0;">
    <img src="bj_01.png">
    </div>
    <div id="spades" style="position:absolute;left:0;top:0;">
    <img src="bj_02.png">
    </div>
    <div id="spades" style="position:absolute;left:0;top:0;">
    <img src="bj_03.png">
    </div>
    </body>
    </html>
      

  2.   

    这样吧，改写MouseUp()函数：
    function MouseUp()
    {
        alert("图片现在的位置是:"+Object.pixelLeft+","+Object.pixelTop);
        Object = null;
    }
      

  3.   

    非常感谢~~我是想让每个图片的坐标都写入各自项
    例如:<script>
    Object=null;
    function MouseDown()
    {
        Object = event.srcElement.parentElement.style;
        cx = event.offsetX;
        cy = event.offsetY;
    }function MouseMove()
    {
        if(Object)
        {
            Object.pixelLeft = event.clientX - cx + document.body.scrollLeft;
            Object.pixelTop = event.clientY - cy + document.body.scrollTop;
            return false;
        }
    }function MouseUp()
    {
        Object = null;
    }document.onmousedown=MouseDown;
    document.onmousemove=MouseMove;
    document.onmouseup=MouseUp;
    </SCRIPT>
    -----------------------------------------
    <script>
    document.form.数字某个图片位置x.value = 该图片坐标x;
    document.form.数字某个图片位置y.value = 该图片坐标y;
    </SCRIPT>
    <FORM NAME="form">
    1X: <INPUT TYPE="TEXT" NAME="1x"> 
    1Y: <INPUT TYPE="TEXT" NAME="1y">
    2X: <INPUT TYPE="TEXT" NAME="2x"> 
    2Y: <INPUT TYPE="TEXT" NAME="2y">
    3X: <INPUT TYPE="TEXT" NAME="3x"> 
    3Y: <INPUT TYPE="TEXT" NAME="3y">
    </FORM>
    <div id="spades" style="position:absolute;left:0;top:0;">
    <img src="bj_01.png">
    </div>
    <div id="spades" style="position:absolute;left:0;top:0;">
    <img src="bj_02.png">
    </div>
    <div id="spades" style="position:absolute;left:0;top:0;">
    <img src="bj_03.png">
    </div>