jQuery UI Dropzone falsch innen versetzt gescrollt iframe

Question

ich mit jQuery-UI draggables und droppables ein Problem habe. Ich muss ein ziehbares Objekt in ein Dropable ziehen, das in einem Iframe platziert wird. Das funktioniert, bis ich den iframe scrolle. Die abwerfbaren Koordinaten werden nicht aktualisiert.

Das Problem wird in diesem

fiddle habe ich gezeigt, die Abhilfe unten bin mit Drag zu machen und in erster Linie auf Iframes möglich fallen zu lassen. Es berechnet die richtigen Offsets, verwendet jedoch nicht die Scroll-Offsets des Iframes. Ich habe versucht, aber ich konnte es nicht optimieren, so dass Scroll-Offsets berücksichtigt werden.

// 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; 
     } 
    } 
} 

Hat jemand einen Vorschlag, das Problem zu beheben. Empfehlungen, um dasselbe auf eine andere Weise zu erreichen, sind ebenfalls mehr als willkommen.

Answer 1

können Sie die auf der Scroll-Menge in den iframeje proportions ‚s Höhe ändern. Die Menge kann mit Hilfe erreicht $("iframe").contents().scrollTop(), wie Sie es verwendet haben, die Scroll-Menge zu ändern:

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

Hier ist die DEMO.