js控制DIV的问题，DIV内的表单元素无法输入内容，请大家帮一下忙！

<html>
<head>
<title></title>
<style type="text/css">
 #new{width:500px;position:absolute;bottom:50px;right=80px;}
</style>
</head>
<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>
<body>
<div><a href="#" onclick="aa(0);">新建</a></div><div id="new" style="display:block" 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.   

    <html>
    <head>
    <title></title>
    <style type="text/css">
     #new{width:500px;position:absolute;bottom:50px;right=80px;}
    </style>
    </head>
    <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>
    <body>
    <div><a href="#" onclick="aa(0);">新建</a></div><div id="new" style="display:block" >
    <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>      <input type="text" name="textfield" style="z-index:100;">
       </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>
      

  2.   

    首先，非常感谢痴情客哥哥，但你改后的代码，DIV不能拖动啦，
      

  3.   

    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;   
             
                }
    document.getElementsByName("textfield")[0].focus();
             }－－
    函数改为上面这个，obj.setCapture();让当前对象成为“new”的div，而输入要让当前对象回到text上
      

  4.   

    拖动层时没有判定鼠标是否在层上，而是以鼠标抬起为结束信号，这样当你拖动过快，鼠标离开了层会出一些状况，这时通过obj.setCapture();将move事件响应扩大到整个body，保证拖动的完整性，但这也不可避免的让事件的主体对象从层转移到body。
    所以只要有
    onmousedown="startgrap(this);" 
     obj.setCapture(); 
    这2句，你就必然选不中text，选都选不中，如何去输入？解决方法：你在每次拖动层的时候，一定要判定鼠标在层上，下面附一段拖动代码。好好研究下<script type="text/javascript">Number.prototype.NaN0=function(){return isNaN(this)?0:this;}var iMouseDown  = false;
    var dragObject  = null;
    var curTarget   = null;function makeDraggable(item){
    if(!item) return;
    item.onmousedown = function(ev){
    dragObject  = this.parentNode;
    //alert(this.parentNode.tagName);
    mouseOffset = getMouseOffset(this.parentNode, ev);
    return false;
    }
    }function getMouseOffset(target, ev){
    ev = ev || window.event; var docPos    = getPosition(target);
    var mousePos  = mouseCoords(ev);
    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
    }function getPosition(e){
    var left = 0;
    var top  = 0;
    while (e.offsetParent){
    left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
    e     = e.offsetParent;
    } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
    top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top};}function mouseCoords(ev){
    if(ev.pageX || ev.pageY){
    return {x:ev.pageX, y:ev.pageY};
    }
    return {
    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
    y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
    }function mouseDown(ev){
    ev         = ev || window.event;
    var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){
    return false;
    }
    }function mouseUp(ev){ dragObject = null; iMouseDown = false;
    }
    function mouseMove(ev){
    ev         = ev || window.event; /*
    We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement
    */
    var target   = ev.target || ev.srcElement;
    var mousePos = mouseCoords(ev); if(dragObject){
    dragObject.style.position = 'absolute';
    dragObject.style.top      = (mousePos.y - mouseOffset.y) + "px";
    dragObject.style.left     = (mousePos.x - mouseOffset.x) + "px";
    } // track the current mouse state so we can compare against it next time
    lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging
    if(curTarget || dragObject) return false;
    }document.onmousemove = mouseMove;
    document.onmousedown = mouseDown;
    document.onmouseup   = mouseUp;window.onload = function() {
    makeDraggable(document.getElementById('这里填写你要拖动的层的id'));}
    </script>
      

  5.   

    DIV里该如何写啊，偶对JS不熟哦，