Wednesday, March 21, 2012

How can I prevent floatingBehavior being draggable via the right mouse button?

Hi there,

I'd like to be able to handle a right-click in a region that has the floatingBehavior. Unfortunately, the fact that floatingBehavior allows the region to be dragged via the right (context) mouse button as well as the left is interfering. (In fact, even if it weren't causing problems for me, having the regions draggable by the right mouse button breaks a lot of the UI conventions I'm hoping to capitalise on.)

So, I'd like to stop the right mouse button from dragging. How can I do this?

There's no built-in option, but that's OK. I'm happy to inherit and override the floatingBehavior class, but the important bits don't seem to be overridable (unless I'm doing it wrong) and anyway floatingBehavior is sealed.

How can I accomplish this?

Many thanks,

Geoff

1. You can't inherit from the class and would have to rewrite it. I WISH!!!
2. Button definition within browser means different things on different browsers, systems, no real way to tell which button was pressed.
3. If you write your own you can do this only for some of the browsers and os. From memory button and which returns 0 on some browsers for left, on some it returns 1, no real way to tell which is clicked for all browsers.
4. Whatever you're trying to capitalize on assumes there is more than 1 button. What abour our Mac friends? (ahem, I admit it I use a Mac on occassion).


Hi,

1:. I was afraid of that.

2, 3 and 4: I'm not convinced. The DOM specifies the button used for events (http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button) and says how to handle buttons being swapped etc. And isn't one of the main drivers of Atlas being able to abstract away browser differences?

Fundamentally though I just don't think allowing drags by any button other than the left one is proper for many UIs. For instance, you can't drag the browser window in XP by grabbing the title bar with the right mouse button. You can't drag and drop messages in Outlook with the right mouse button. You can't drag and drop text in this very edit control with the right mouse button. All those actions only work with the left mouse button (with the right mouse button operating a context menu sometimes). I just want to be consistent with those expected behaviors.

I'm not against writing code to solve this, I'd just rather not have to reimplement the whole floatingBehavior for this one change.

Geoff


Like I said you won't be able to do this for every browser in every type of event. Here's a snippet that works for most browsers but I would only use it if you have strict requirements. I would also be careful about referring to buttons as left and right as some operating systems give you the option to switch left and right button (think left handed users) so better names are primary, secondary. The tertiary is either the 3rd button or the mouse wheel, no real definition here. Here's what you'd use inside your event.

var btn = Event.Which(e);
if (btn != Button.Primary) return;

Type.createEnum('Button','None', 0,'Primary', 1,'Secondary', 2,'Tertiary', 3);


Type.registerNamespace('Event');
Event.Which =function(e) {
if (typeof(e) =='undefined') e = window.event;
var isIE =(Sys.Runtime.get_hostType() == Sys.HostType.InternetExplorer); if (isIE ? (event.button & 1) > 0 : (event.button==1 ||event.which==1))return Button.Primary;
if (isIE ? (event.button & 2) > 0 : (event.button==3 ||event.which==3))return Button.Secondary;
if (isIE ? (event.button & 4) > 0 : (event.button==2 ||event.which==2))return Button.Tertiary;

return Button.None;
}

No comments:

Post a Comment