Results 1 to 2 of 2

Thread: help to find error

  1. #1
    Join Date
    Feb 2011

    help to find error

    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.

        <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 ;
      <style type="text/css">
         position : absolute ;
         height : 150 ;
         width : 150 ;
         background-color : khaki ;
         top : 100px ;
         left : 100px ;
         z-index : 1 ;
         visibility : visible ;
    <body onmousedown = "dragIt()"
          onmouseup = "dropIt()" 
          onmousemove = "moveIt()" >
    <div id="khakiBox" name="khakiBox">
      <p align="center">
        some text

  2. #2
    Join Date
    Jun 2010
    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 () 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...)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center