为什么mousemove无效

不知道什么原因 当移动div时有效 但在div里加个img标签 就无效了 高手给解答下<!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>
<script type='text/javascript' language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
</head>
<STYLE type="text/css">
<!--
* {padding:0;margin:0;}
body {font:12px Tahoma,Arial; cursor:default;}
#show_BigImage {}
#show {width:200px; height:200px; border:2px #bbbbbb solid; cursor:move;}
-->
</style>
<script language="javascript">
var isDown=false;
var oldX=0;
var oldY=0;
function init(){
$("#show").mousedown(down).mousemove(move).mouseup(up);
}
function down(event){
isDown=true;
oldX=event.clientX;
oldY=event.clientY;
}
function up(){
if (isDown==true)
{
isDown=false;
}
}
function move(event){
if (isDown==true)
{
var X=event.clientX;
var Y=event.clientY;
var l=Number($("#show").css("margin-left").replace("px",""));
var t=Number($("#show").css("margin-top").replace("px",""));
$("#show")
.css("margin-left",l+(X-oldX)+"px")
.css("margin-top",t+(Y-oldY)+"px");
oldX=X;
oldY=Y;
}
}
</script>
 <BODY>
<div id='show_BigImage'>
<div id='show_BigImage_main'>
<div id='show'>
<img id='img' src='http://photo1.bababian.com/20070225/DFC2987CB61F25015C9DE3BD42D245FA_800.jpg' style='width:100%; height:100%;' />
</div>
</div>
</div>
<script language="javascript">$(document).ready(init);</script>
 </BODY>
</HTML>

解决方案 »

  1.   

    function init(){
        $("#show,#img").mousedown(down).mousemove(move).mouseup(up);
    }
      

  2.   

    img的mousemove不继承div，需要另外绑定
      

  3.   

    我说错了,div里的img是响应div的mousemove的<div onMouseMove=alert("div")>aaa<img src="xxx.gif"></img>aaa</div>我试了下，这样是可以的我没用过jquery,不清楚如何改成jquery的形式
      

  4.   

    让img和show一起移动不就可以了？
      

  5.   

    我改成这样了 还不是不行 而且还有一个问题 就是接收不到mouseup的响应
    <!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>
    <script type='text/javascript' language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script></head>
    <STYLE type="text/css">
    <!--
    * {padding:0;margin:0;}
    body {font:12px Tahoma,Arial; cursor:default;}
    #show_BigImage {}
    #show {width:200px; height:200px; border:2px #bbbbbb solid; cursor:move;}
    -->
    </style>
    <script language="javascript">
    var isDown=false;
    var oldX=0;
    var oldY=0;
    function init(){
    //$("#show,#img").mousedown(down).mousemove(move).mouseup(up);
    }
    function down(){
    isDown=true;
    oldX=event.x;
    oldY=event.y;
    }
    function up(){
    if (isDown==true)
    {
    isDown=false;
    }
    }
    function move(){
    if (isDown==true)
    {
    var X=event.x;
    var Y=event.y;
    var l=Number($("#show").css("margin-left").replace("px",""));
    var t=Number($("#show").css("margin-top").replace("px",""));
    $("#show")
    .css("margin-left",l+(X-oldX)+"px")
    .css("margin-top",t+(Y-oldY)+"px");
    oldX=X;
    oldY=Y;
    }
    }
    </script>
     <BODY>
    <div id='show_BigImage'>
    <div id='show_BigImage_main'>
    <div id='show' onmousedown="down()" onmousemove="move()" onmouseup="up()">
    <img id='img' src='http://photo1.bababian.com/20070225/DFC2987CB61F25015C9DE3BD42D245FA_800.jpg' style='width:100%; height:100%;' />
    </div>
    </div>
    </div>
    <script language="javascript">$(document).ready(init);</script>
     </BODY>
    </HTML>