拖动的图层内，如何让鼠标在文本框内点击有效。。。（已附源码）

请各位帮忙改改如下代码，现在是在图层内加入文本框，无法让鼠标点击文本框输入内容，如果鼠标只能在标题栏进行拖动，就好了谢谢
--------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #new{
width:300px;
height:200px;
background:#fff;
position:absolute;
bottom:224px;
right=80px; left: 260px;
}
.nr_top{height:20px;background:#3399FF;color:#fff;}
.nr_bg{background:#CCCCCC;}
.nr_di{background:#000;color:#fff;height:20px;}
    
</style>
<script language="javascript">
        var moveable = false;
        function aa(val)
        {                        
             var obj = document.getElementById("new");
            if(val == 0)
            {
                obj.style.display="";
                        var x,y;
            
                x = event.clientX;
                y = event.clientY;
           
                obj.style.left=x;
                obj.style.top=y;
                        //alert("X:"+x+"Y:"+y);
            }
                    else
              obj.style.display="none";
        }    
        function startgrap(obj)
        {                        
            if(event.button==1)
            {
            obj.setCapture();
             //记录鼠标和层位置;
                       x0 = event.clientX;
                       y0 = event.clientY;
                       x1 = parseInt(obj.style.left);
                       y1 = parseInt(obj.style.top);
                       moveable = true;            
            }
         }
        function stopgrap(obj)
        {
            if(moveable)
            {
                obj.releaseCapture();//用来释放对鼠标的捕捉
                moveable = false;
            }
        }
        function grap(obj)
        {
             if(moveable)
                  {                       
                           obj.style.left = x1 + event.clientX - x0;
                           obj.style.top  = y1 + event.clientY - y0;
            }
        }
    </script></head>
<body> 
<div><a href="#" onClick="aa(0);">新建</a></div>
<div id="new" style="display:none" onMouseDown="startgrap(this);" onMouseUp="stopgrap(this);" onMouseMove="grap(this);"><div style="border:1px solid red;position:absolute;right=1px;"><span onClick="aa(1);" style="cursor:hand"><font color="#eee"><b>关闭</b></font></span></div>
<div class="nr_top">这里是标题</div>
<div class="nr_bg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><label>
      <input type="text" name="textfield">
    </label></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table></div>
<div class="nr_di">底部信息</div>
</div></body>
</html>

解决方案 »

  1.   

    jf
    /////////////////////////////////////////
    <HTML><HEAD>
    <style>
    #layer { position:absolute; z-index:auto; padding:0px 0px; margin:0px 0px; width:607px; }
    #layer #win { float:left; background-color:#EEEEEE; width:600px; border:1px solid #000000; margin:0px 0px; padding:0px 0px; }
    #layer #win #winTitle { cursor:move; font-family:Verdana; font-weight:bold; font-size:14px; padding:10px 10px; background-color:#EEEEEE; color:#CC0000; -moz-user-select:none; }
    #layer #win #winClose { cursor:pointer; font-family:Verdana; font-weight:normal; font-size:9px; padding:10px 10px; color:#666666; position:relative; float:right; }
    #layer #win #winBody { padding:5px 10px; font-family:Verdana; font-size:10px; background-color:#FFFFFF; }
    #layer #win #winFoot { text-align:center; padding:10px 10px; background-color:#EEEEEE; }
    </style>
    <script language="javascript">
    function changeClose(){
     document.getElementById("layer").style.display="none";
    }
    function mo()
    {
      var o1=document.getElementById("winTitle");
      var o2=document.getElementById("layer");
      window.event.cancelBubble = true;
      var x=window.event.layerX||window.event.offsetX;
      var y=window.event.layerY||window.event.offsetY;
      document.onmousemove=function(){
       o2.style.left=(window.event.clientX-x)+"px";
       o2.style.top=(window.event.clientY-y)+"px";
      }
      document.onmouseup=function(){document.onmousemove=null;};
    }
    </script>
    </HEAD>
    <body>
    <div id="layer">
      <div id="win">
        <div id="winClose" onclick="changeClose();">CLOSE</div>
        <div id="winTitle" onmousedown="mo()">Title</div>
        <div id="winBody">
        Body
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><label>
          <input type="text" name="textfield">
        </label></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
        </div>
        <div id="winFoot">Foot</div>
      </div>
    </div>
    </body>
    </HTML>