help to find error

This site is best viewed in a modern browser with JavaScript enabled.

programAngel

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?

<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>

acestuff

I haven't looked into it but I strongly suspect that the problem is within the "moveIt" method.

It uses "event", which unless it is a property of window (i.e. window.event) it is not in scope.

I believe in IE, window.event is defined, whereas in all other normal browsers (:p) it is not. Instead the event is passed to the listener. Therefore, to get that script to work moveIt should take event as a parameter (and may also have to use different properties of it, I can't remember exactly...)