स्क्रॉल किए गए आईफ्रेम

Question

के अंदर jQuery UI ड्रॉपज़ोन गलत ऑफ़सेट मुझे jQuery-UI draggables और droppables के साथ कोई समस्या है। मुझे एक ड्रापेबल के अंदर ड्रैगगेबल खींचने की ज़रूरत है जो एक आईफ्रेम के अंदर रखा गया है। यह ठीक काम करता है जब तक कि मैं iframe स्क्रॉल नहीं करता। ड्रॉपपेबल निर्देशांक अद्यतन नहीं हैं।

मुद्दा यह fiddle

में दर्शाया गया है मैं नीचे वैकल्पिक हल का उपयोग कर रहा खींचें बनाने के लिए और पहली जगह में संभव iframes को छोड़ने। यह सही ऑफ़सेट की गणना करता है लेकिन आईफ्रेम के स्क्रॉल ऑफ़सेट का उपयोग नहीं करता है। मैंने कोशिश की लेकिन इसे tweaked नहीं मिल सका, तो यह खाते में स्क्रॉल ऑफसेट ले जाएगा।

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

क्या किसी को इस मुद्दे को ठीक करने का कोई सुझाव है। एक ही चीज़ को हासिल करने के लिए सिफारिशें भी स्वागत से अधिक हैं।

Answer 1

आप iframe में स्क्रॉल राशि के आधार पर proportions की ऊंचाई बदल सकते हैं। राशि $("iframe").contents().scrollTop() का प्रयोग कर प्राप्त किया जा सकता है के रूप में आप इसे इस्तेमाल किया है स्क्रॉल राशि बदलने के लिए:

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

यहाँ DEMO है।