Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1

Thread: drag help

  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    drag help

    Beginning of Update:

    I figured out the problem. It was related to the use of document.body as the target for my mousemove event, when it should have just been document. I have bolded the changed code in case someone is interested in learning about potential pitfalls. Also, it seems that the use of the moveflag isn't really needed, as the removeEventListener in the endmove function is sufficient to end the movement and the initmove function is sufficient to start the movement.

    Does anybody know why using document.body.addEventListener("mousemove",maindragbox.makemove,false); instead of document.addEventListener("mousemove",maindragbox.makemove,false);
    fixed the problem of the cursor losing hold of the handle?

    End of Update

    Hello,

    I am writing a dragging script for fun where the user drags the object by the handle, but have run into a problem where the cursor loses hold of the handle and the dragging stops. I have tried searching the forum for similar problems, but have not found any answers.

    Here is the complete code including the css which was tested in Firefox 1.5.

    Code:
    <html>
    <head>
    
    <style type="text/css">
    
    div.dragbox
    {
    position:absolute;
    width:100px;
    height:100px;
    zIndex:1000
    }
    
    div.handle
    {
    width:100%;
    height:16px;
    background-color:red;
    cursor:move;
    zIndex:1001
    }
    
    span.handletext
    {
    zIndex:1000
    }
    
    </style>
    
    <body>
    
    <div id="dragbox" class="dragbox">
    </div>
    
    <div id="handle" class="handle">
    
    </div>
    
    <div id="dragcontent">
    <p>Hi how are you doing.</p>
    <p>I am very well thank you.</p>
    </div>
    
    <script type="text/javascript">
    
    var maindragbox =
    {
    dragbox:false,
    handle:false,
    handletext:false,
    dragcontent:false,
    moveflag:false, //This is not really needed
    
    initbox : function()
    {
    	this.dragbox = document.getElementById("dragbox");
    	this.handle = document.getElementById("handle");
    	this.handletext = document.getElementById("handletext");
    	this.dragcontent = document.getElementById("dragcontent");
    
    	this.dragbox.appendChild(handle);
    	this.dragbox.appendChild(dragcontent);
    	
    	this.dragbox.style.left = 300;
    	this.dragbox.style.top = 100;
    	
    	this.oldx = parseInt(dragbox.style.left);
    	this.oldy = parseInt(dragbox.style.top);
    	
    	this.handle.addEventListener("mousedown",this.initmove,false);
    	this.handle.addEventListener("mouseup",this.endmove,false);
    },
    
    initmove : function(e)
    {
        this.oldmx = e.clientX;
    	this.oldmy = e.clientY;
    	this.oldx = parseInt(dragbox.style.left);
    	this.oldy = parseInt(dragbox.style.top);	
    	
    	this.moveflag=true; //Not needed
    /*
    Using document.body as a target will cause the cursor to lose hold of the 
    
    handle. Use document.addEventListener instead	
    */
    document.body.addEventListener("mousemove",maindragbox.makemove,false);
    
    },
    
    makemove : function(e)
    {
        if(handle.moveflag)
        {
    	    var newleft = Math.max(0,handle.oldx + e.clientX - handle.oldmx);
    	    var newtop =  Math.max(0,handle.oldy + e.clientY - handle.oldmy);
    	    dragbox.style.left = newleft + 'px';
    	    dragbox.style.top = newtop + 'px';   	
        }
    },
    
    endmove : function(e)
    {
    //this.removeEventListener should instead be 
    
    //document.removeEventListener	
    
    this.removeEventListener("mousemove",maindragbox.makemove,false);	
    handle.moveflag=false; //Not needed
    }
    
    };
    
    var mydragbox = maindragbox;
    mydragbox.initbox();
    
    
    </script>
    
    </body>
    </head>
    </html>
    Thank you for your help.
    Last edited by chris_394; 06-28-2006 at 06:56 AM. Reason: I fixed the problem but I have a question regarding the solution.


 

Posting Permissions

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