JQuery UI dropzone wrong offset inside scrolled iframe

Question

I have a problem with jQuery-UI draggables and droppables. I need to drag a draggable inside a droppable that fits inside an iframe. This works fine until I scroll through the iframe. Dropped coordinates are not updated.

The problem is demonstrated in this fiddle.

I use the workaround below to make dragging and dropping into iframes possible in the first place. It calculates the correct offsets, but does not use iframe scroll offsets. I tried, but could not configure it, so it would take a scroll offset.

// Create new object to cache iframe offsets $.ui.ddmanager.frameOffsets = {}; // Override the native `prepareOffsets` method. This is almost // identical to the un-edited method, except for the last part! $.ui.ddmanager.prepareOffsets = function (t, event) { var i, j, m = $.ui.ddmanager.droppables[t.options.scope] || [], type = event ? event.type : null, // workaround for #2317 list = (t.currentItem || t.element).find(":data(ui-droppable)").addBack(), doc, frameOffset; droppablesLoop: for (i = 0; i < m.length; i++) { //No disabled and non-accepted if (m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0], (t.currentItem || t.element)))) { continue; } // Filter out elements in the current dragoged item for (j = 0; j < list.length; j++) { if (list[j] === m[i].element[0]) { m[i].proportions().height = 0; continue droppablesLoop; } } m[i].visible = m[i].element.css("display") !== "none"; if (!m[i].visible) { continue; } //Activate the droppable if used directly from draggables if (type === "mousedown") { m[i]._activate.call(m[i], event); } // Re-calculate offset m[i].offset = m[i].element.offset(); // Re-calculate proportions (jQuery UI ~1.10 introduced a `proportions` cache method, so support both here!) proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight }; typeof m[i].proportions === 'function' ? m[i].proportions(proportions) : (m[i].proportions = proportions); /* ============ Here comes the fun bit! =============== */ // If the element is within an another document... if ((doc = m[i].document[0]) !== document) { // Determine in the frame offset using cached offset (if already calculated) frameOffset = $.ui.ddmanager.frameOffsets[doc]; if (!frameOffset) { // Calculate and cache the offset in our new `$.ui.ddmanager.frameOffsets` object frameOffset = $.ui.ddmanager.frameOffsets[doc] = $( // Different browsers store it on different properties (IE...) (doc.defaultView || doc.parentWindow).frameElement ).offset(); } // Add the frame offset to the calculated offset m[i].offset.left += frameOffset.left; m[i].offset.top += frameOffset.top; } } } 

Does anyone have a suggestion to fix the problem. Recommendations for achieving the same in a different way are also welcome.

Answer 1

You can change the height of the proportions depending on the amount of scroll in the iframe . The amount can be reached with $("iframe").contents().scrollTop() , since you used it to change the amount of scroll:

 proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight - $("iframe").contents().scrollTop() }; 

Here is the demo .