452361 - Add Internet Explorer's setCapture and ReleaseCapture functionality to Firefox

Status: RESOLVED DUPLICATE of bug 503943

(Firefox :: General, enhancement)

Description

[Greg Houston]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

This solves a couple similar problems.

1. You have a fluid layout where the columns are resizable. One of the columns either has an iframe in it or a plugin such as Flash. When you try to resize the columns, as soon as the mouse moves over the iframe or plugin the iframe or plugin steals the mouse movement and thus makes it impossible to resize the columns.

2. You have a DHTML window that is floating over an iframe or plugin below it. when you try to resize the DHTML window the mouse movement is stolen by the iframe or plugin content below it thus making it impossible to resize the DHTML window.

A complex workaround for use case 2 is to create a transparent overlay between the DHTML window and the iframe or plugin below it.

I am not aware of a workaround for the first use case, particular if each column has a either an iframe or plugin in it.

Internet Explorer's setCapture and releaseCapture make working with this issue trivial. You set setCapture on the mousedown of the resize handle and releaseCapture on the mouseup of the resize handle. No more problems. 

Reproducible: Always

Steps to Reproduce:
See Details above.



Usage Examples:

Where 'handle' is the element dragged to resize the columns or DHTML windows:

handle.addEvents({
  'mousedown': function(){
    handle.setCapture();
  },	
  'mouseup': function(){
    handle.releaseCapture();
  }
});

Note: The JavaScript above is written with Mootools syntax. I don't know if I can use pre or code tags in this form or not so I won't. The example may lose some minor formatting.

Another example:

<div> some plugin </div>

<div id="myResizeHandle" onmousedown="this.setCapture" onmouseup="this.releaseCapture"></div>

<div> an iframe </div>

Again, not sure if I can use html in this form so I used name codes for the special characters.