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

Thread: Click and Drag

  1. #1
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Click and Drag

    I'm looking to add a drop/drop feature to one of my pages... but firstly, just to get my head around the idea of capturing events I'd like to know how to do this simple thing.

    It's easy to have onMouseover events for an element but how do I make it so that onMousover only works if the mouse button is depressed. So it's kinda like onMouseover -> if (MOUSEDOWN) -> Do something.

    Thanks for any help :-)

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts

  • #3
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's great thanks but what I actually want at the moment is a check that two simultaneous events are occurring (onMouseover and onMousedown)... can I do that?

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>51755</title>
    		<style type="text/css">
    			#box
    			{
    				width:200px;
    				height:200px;
    				background-color:#f00;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box"></div>
    		<p> </p>
    		<script type="text/javascript">
    			var mousedown = false;
    
    			var body = document.getElementsByTagName("body")[0];
    			body.addEventListener("mousedown", function(){mousedown = true}, true);
    			body.addEventListener("mouseup", function(){mousedown = false}, true);
    
    			var box = document.getElementById("box");
    			box.addEventListener("mouseover", function(){if(mousedown)alert("mousedown & mouseover")}, true);
    		</script>
    	</body>
    </html>

  • #5
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nice one thanks I'll take a closer look and see how it works. I notice it only works in Mozilla not IE... is this just an IE issue?

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    IE doesn't support addEventListener (which is part of the spec). You'll need to add an IE specific method to get around this. Something like
    Code:
    body.onmousedown = function(){mousedown = true}

  • #7
    Regular Coder
    Join Date
    Dec 2004
    Location
    Manchester, UK
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Trust Mr Gates to stick with the guidelines Thanks very much you've been a really big help..


  •  

    Posting Permissions

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