jQuery UI Draggable - Droppables in an iFrame

The scenario

You've got the usual drag and drop use case, but you want to have your draggables in the top window, and the droppables within an iframe (located on the same domain, ofcourse!).

jQuery UI doesn't support this use case, and as such the offset of the container frame element isn't taken into account, causing issues with drop detection!

The warning

This fix requires the overriding of a core jQuery UI method, but should not be done in the main jquery-ui.js file!. Instead, include this in a new file, and include it after the jQuery UI library script. Obviously if jQuery UI's method changes substantially, or disappears entirely, this fix won't work. But until then... happy dragging!

The fix (jQuery UI >=1.10.1)

The fix is farily straight forward, but requires overriding the $.ui.ddmanager.prepareOffsets method, in order to take into account elements which lie within a different document. Here's the code

Note: jQuery UI 1.10.4 update

The 1.10.4 release changes the way the proportions attribute is used, repalcing the regular object syntax with a helper callback method. You can view the updated syntax here.

The explanation

In order for the droppable offets to be calculated correctly, the offset of the containing frame must be taken into account, by adding it to the calculated droppables top and left offsets. This ensures the offset is correct in relation to the parent document.

Important note: The $.ui.ddmanager.frameOffsets object caches the <iframe> offset in .prepareOffsets(). If this changes regularly, you may need to prevent caching this and instead re-evaluate the .offset() call on the frameElement each time the .prepareOffsets() method is run.

qTip2 - Now on jsDelivr

qTip2 is now officially available through the jsDelivr CDN, and is the CDN of choice for the library starting from today's update! jsDelivr has better performance and availabilty than current the CDNJS service, so it's a welcome addition to the libraries availablity. You can grab the latest stable releases (and

Read more

60fps scrolling using `pointer-events: none`

Ryan Seddon just posted a very useful CSS tip to increase your scrolling speeds via use of pointer-events: none, based on Christian Schaefer's tweet: @paul_irish Easy. Apply "pointer-events: none" to the <body> on scrollstart and remove it on scrollend. @tabatkins— Christian Schaefer (@derSchepp) November

Read more

qTip2 - v2.2.0 released!

Where to Download Head over to the Download page to customise your qTip2 download and grab the latest version! Changelog You can see the various changes in the v2.2.0 release on the Changelog

Read more

qTip2 - Pre-release changes (AKA What happened to my qTip styles!?)

qTip2 is under-going to considerable changes over the next few weeks, with a new website on it’s way, a brand new build system to go along with it, and several new features and documentation updates. However, there are some breaking changes as qTip2 marches on to it’s final

Read more

notyfy = noty + CSS themes

After finding the beautiful noty plugin by Nedim Arabacı and forking it, I was surprised to see the lack of pure CSS styling available (without needing any JS, that is.). Fortunately it didn’t take too much work to remove the regular JS themes in favour of regular old CSS

Read more

qTip2 – Tip plugin’s dimension options updated

For those of you using the qTip2 nightly builds, as of commit 970cfabacd the tip plugin’s width and height options have changed slightly to become relative to the tips position on the tooltip. "relative to the tips position"?! When the position of the tip is on the horizontal sides

Read more