473,721 Members | 4,051 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Are simultaneous mouseover and mousemove events possible?

JB
I am struggling to figure out a way to allow one element
to be dragged, but still capture 'mouseover' events on
other elements.

I've created a simple example to demonstrate what I mean:
http://gerromorpha.cs.uoregon.edu/moveAndOver.html
(The above link is only meant for Windows/Firefox.)

It's not much code, but it's probably too much to paste here.
The gist of it is, when a user clicks on element #1, I attach
the mousemove event to element #1. That event remains
attached until the user un-clicks (mouseup). During the time
the user is dragging element #1, however, element #2 doesn't
register the mouseover events it should.

Any ideas on how to get around this? If I should be approaching
this in a completely different way I would appreciate some
alternatives. Any response, for that matter, will be greatly
appreciated.

Mar 17 '06 #1
5 2409
You know, I was working on this very thing a couple weeks ago to
implement classic drag and drop. Luckily for you I have explored this
issue extensively and can save you hours of researching by telling you
what I found out.

The short of it all, you can't. Both IE and FF just don't allow it
right now. What you do need is a collusion function which will tell you
when one item (the item you are dragging) has collided (is over)
another element. When the two elements collide, you can call a function
which will give you the same effect as mouseover on the second element.

I got this off a guy here on the forums, and even though it is a bit
unreadable, it works like a charm and allows me to do the drag and drop
I need.

hitTest = function(o, l){
function getOffset(o){
for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth,
b: o.offsetHeight} ;
o = o.offsetParent; r.l += o.offsetLeft, r.t +=
o.offsetTop);
return r.r += r.l, r.b += r.t, r;
}
for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length) , i = (j
? l = [l] : l).length; i;
b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r :
b.l <= a.r))
&& (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) &&
(r[r.length] = l[i]));
return j ? !!r.length : r;
};

Use: hitTest(obj1,ob j2)
Description: Returns true and false if the reference to obj1 and obj2
overlap or "collided".

You would put this in your mousemove event within an if statement. If
it is true, call the function you want to call as if it was in a
mouseover of the second element.

Good luck! :)

Mar 18 '06 #2
VK

JB wrote:
I am struggling to figure out a way to allow one element
to be dragged, but still capture 'mouseover' events on
other elements.

I've created a simple example to demonstrate what I mean:
http://gerromorpha.cs.uoregon.edu/moveAndOver.html
(The above link is only meant for Windows/Firefox.)


In addition to the previous answer:

It should be clear that the problem is *not* that mouse events are not
reaching div2. Events are going Russian hills (down to bottom and up to
high) in Firefox and Bubble way (from the bottom to high) in IE, and
nothing is changed while dragging. As your current drag script is
vulnerable to the "drag off the body" trick, you can see it yourself
(and would be nice to fix it in the release of course). Start dragging
div1 to the menu bar until it stops. Release button an return mouse to
the screen. div1 is still in dragging mode but doesn't move (you may
need to repeat this by changing the return path for the mouse to get
this). Now if you move your mouse over div2, the mouseover event will
be properly captured.

So the problem is not in event capturing, but in the fact that while
dragging the mouse is not over div2 - it is over div1. div1 is over
div2 - that's true, but there is no handler like onDiv1Over to capture
:-)

So you need to use coords rectangle check as suggested for FF and
others. For IE it is enough to use the native
document.elemen tFromPoint(x,y) method.

Mar 18 '06 #3
JB
Wow. That is some serious abuse of for-loops.
It does seem to mostly work. I have translated
it into more readable code and I will post it here
for future reference.

I am not sure I understand exactly what's going on,
but I think if obj2 (in my translated code) is a single
object, it's converted into a single-element array.
Otherwise, if the user passed an array of objects,
hitTest() detect collisions with all the elements in
that array. I have tried sending the function an
array of objects but I couldn't get it to work.

hitTest = function(obj1, obj2){
function getOffset(obj){
var objBounds = {
objLeft: obj.offsetLeft,
objTop: obj.offsetTop,
objRight: obj.offsetWidth ,
objBottom: obj.offsetHeigh t
};

for( ; obj = obj.offsetParen t; )
{
objBounds.objLe ft += obj.offsetLeft;
objBounds.objTo p += obj.offsetTop;
}

objBounds.objRi ght += objBounds.objLe ft
objBounds.objBo ttom += objBounds.objTo p

return objBounds;
}

var obj2Bounds
var collisionArray = [];
var obj1Bounds = getOffset(obj1) ;

// My guess:
// If obj2 is a single object, convert it to a single
// element array. Now that obj2 is definitely an
// array, set i to the length of that array
var j = isNaN(obj2.leng th);
var i = (j ? obj2 = [obj2] : obj2).length

for(; i; )
{
obj2Bounds = getOffset(obj2[--i])

if ( (obj1Bounds.obj Left == obj2Bounds.objL eft ||
(obj1Bounds.obj Left > obj2Bounds.objL eft ?
obj1Bounds.objL eft <= obj2Bounds.objR ight :
obj2Bounds.objL eft <= obj1Bounds.objR ight))
&& (obj1Bounds.obj Top == obj2Bounds.objT op ||
(obj1Bounds.obj Top > obj2Bounds.objT op ?
obj1Bounds.objT op <= obj2Bounds.objB ottom :
obj2Bounds.objT op <= obj1Bounds.objB ottom)))
{
collisionArray[collisionArray. length] = obj2[i];
}
}

// My guess:
// if obj2 is a single object and it collides with obj1,
// collisionArray. length == 1 so !!collisionArra y.length == true
// if obj2 is an array of objects, return an array of
// the subset of obj2 objects with which obj1 collidess
return j ? !!collisionArra y.length : collisionArray;
};
Thanks for your post, you saved me a lot of pain.

Martyr2 wrote:
You know, I was working on this very thing a couple weeks ago to
implement classic drag and drop. Luckily for you I have explored this
issue extensively and can save you hours of researching by telling you
what I found out.

The short of it all, you can't. Both IE and FF just don't allow it
right now. What you do need is a collusion function which will tell you
when one item (the item you are dragging) has collided (is over)
another element. When the two elements collide, you can call a function
which will give you the same effect as mouseover on the second element.

I got this off a guy here on the forums, and even though it is a bit
unreadable, it works like a charm and allows me to do the drag and drop
I need.

hitTest = function(o, l){
function getOffset(o){
for(var r = {l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth,
b: o.offsetHeight} ;
o = o.offsetParent; r.l += o.offsetLeft, r.t +=
o.offsetTop);
return r.r += r.l, r.b += r.t, r;
}
for(var b, s, r = [], a = getOffset(o), j = isNaN(l.length) , i = (j
? l = [l] : l).length; i;
b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r :
b.l <= a.r))
&& (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) &&
(r[r.length] = l[i]));
return j ? !!r.length : r;
};

Use: hitTest(obj1,ob j2)
Description: Returns true and false if the reference to obj1 and obj2
overlap or "collided".

You would put this in your mousemove event within an if statement. If
it is true, call the function you want to call as if it was in a
mouseover of the second element.

Good luck! :)


Mar 19 '06 #4
JB
> So the problem is not in event capturing, but in the fact that while
dragging the mouse is not over div2 - it is over div1. div1 is over
div2 - that's true, but there is no handler like onDiv1Over to capture


That makes perfect sense. I feel stupid for not thinking of that.

Thanks for your reply.

Mar 19 '06 #5
JB said on 20/03/2006 7:24 AM AEST:
Wow. That is some serious abuse of for-loops.
It does seem to mostly work. I have translated
it into more readable code and I will post it here
for future reference.


I've done a similar thing by creating a object that contains 'drop
zones'. As you drag one element, you see if it's over a drop zone. By
storing the co-ords of each drop-zone (and updating them if/when they
move) the algorithm for seeing if the dragged element is 'over' a drop
zone is much faster than finding the co-ords from scratch every time.

If you have a lot of drop zones, give them a key based on their
co-ordinates. Then keep the keys in an array and use either a btree or
quadtree search to find 'hits'. That will allow you to keep track of
hundreds of drop zones without too much processing overhead.
[...]
--
Rob
Mar 20 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
5666
by: Crucifix | last post by:
Hello, I'm writing a small C# app, and part of what I'm trying to do involves the dragging of PictureBox controls on a form. Unfortunately, MouseMove seems to be behaving very oddly, causing spurious MouseMove events when the cursor doesn't actually move. I've looked for a solution in the groups, and although I've come close, I haven't found a proper explanation or fix. Here is a rundown, followed by a very simple test app that...
7
1881
by: rkbnair | last post by:
Is it possible to change the background color of the DataGrid on pointing the mouse over a certain row?
3
5156
by: TyBreaker | last post by:
I'm writing a screen saver using Visual Studio 2005 (Basic) and I have a Form which contains a PictureBox. I have two events, Click and MouseMove that I'd like to cause the program to end (see below) as one would expect from a screen saver. Well my Click event fires but for some reason my MouseMove event does not. Both the Form and the PictureBox are enabled. In my Form_Load routine, I tried placing "Me.Capture = true" which...
1
3073
sgeklor
by: sgeklor | last post by:
Dear All, My question refers to how best to organise my mouse events to correctly and efficiently give the effect I want. On my form I have a panel and that panel contains a number of controls. By setting up the MouseOver and MouseOut events for the panel I am able to change the panel's background while the mouse is over the panel. A very simple effect and one that is straightforward to implement. But, when the mouse cursor goes over...
18
3955
by: Shocky | last post by:
Hi there, I am trying to detect whether my IE6 users have pressed both right and left mouse buttons simultaneously in my Javascript code, by using: if(event.button==3) {alert("Both right and left mouse buttons pressed");} I am calling the above code on mousedown or mouseup events.
2
3029
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the length. <html> <head> <title>Rapid Blocking Interface</title> <style> .calendar {
4
6471
by: raylopez99 | last post by:
Compound question: first, and this is not easy, if there's a way to detect multiple simultaneous key presses in C# let me know (in the below code, keys c and d being pressed simultaneously or nearly so). I researched this and for C# (as opposed to MFC) there is no library function, and no easy way, though some code on the net suggested that you set up a thread that 'lives' for a certain time, then, if keys are pressed in that certain...
2
4228
by: Lazarus | last post by:
Hi, I have a canvas that reacts to mousedown and mousemove. Once I click the canvas I want to track the cursor wherever it goes, including outside the browser. Setting window.onmousemove only gives events inside the browser of course. I tried window.captureEvents which works on Safari but FireFox says it's deprecated. Mozilla's docs say to use window.addEventListener but the behavior is the same: in Safari I can drag outside the window and...
0
8851
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9373
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9227
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9143
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
6676
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5992
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4497
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3202
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2588
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.