the code is suppose to allow the user to drag the box.
when you press the box and the move the mouse the box is suppose to move.

I know it is not suppose to work in firefox, but it doesn't work for me in chrome as well.

Why?
Code:
<html>

  <head>

    <title>DragAndDrop</title>

    <script language="JavaScript">

     var boolDrag ;

     boolDrag = false ;



     function dragIt()  {

       if (event.srcElement.name == "khakiBox") {

         boolDrag = true ;

       }

     }



     function dropIt()  {

       boolDrag = false ;

     }



     function moveIt()  {

       if (boolDrag)  {

         document.all.khakiBox.style.top = event.y ;

         document.all.khakiBox.style.left = event.x ;

       }

     }

    </script>

  </head>

  <style type="text/css">

    #khakiBox 

    {

     position : absolute ;

     height : 150 ;

     width : 150 ;

     background-color : khaki ;

     top : 100px ;

     left : 100px ;

     z-index : 1 ;

     visibility : visible ;

    }

</style>



<body onmousedown = "dragIt()"

      onmouseup = "dropIt()" 

      onmousemove = "moveIt()" >

<div id="khakiBox" name="khakiBox">

  <p align="center">

    some text

  </p>

</div>

</body>

</html>