jQuery UI interactions don't work in iframes

jQuery UI interactions don't work in iframes

I initially thought this was a regression for 1.8 but it seems not. I thought for sure I had depended on this behavior before.

Given an iframe with a containing div.
  1. var doc = $('iframe').get(0).contentDocument;
  2. $('div#dragme', doc).draggable();  

The mousemove and mouseup events are bound to the wrong document. Drags won't actually start till the mouse moves outside the iframe, and drags stop only on mouseup outside the iframe.

I'm not an expert with jQuery/jQueryUI source, but the following changes work for me. On lines 85-87 of jquery-ui-mouse.js replace the current $(docment).bind... with
  1. this.docs = [];
  2. this.element.each(function() {
  3. var doc = $(this).get(0).ownerDocument;
  4. if($.inArray(doc, self.docs) != -1)
  5. return true;
  6. self.docs.push(doc);
  7. $(doc)
  8. .bind('mousemove.'+self.widgetName, self._mouseMoveDelegate)
  9. .bind('mouseup.'+self.widgetName, self._mouseUpDelegate);
  10. });
Then unbind in the _mouseUp handler (line 119-121 )becomes
  1. $(this.docs)
  2. .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
  3. .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
There is likely a more elegant way to handle that, but I don't know of anything that handles a case with a jQuery collection that includes elements with more than one document.

    • Topic Participants

    • erik