Xóa nhầm vùng thả xuống giao diện người dùng jQuery bên trong iframe cuộn

Question

Tôi đang gặp sự cố với các trình kéo thả và jQuery có thể kéo xuống. Tôi cần kéo một vật thể có thể kéo vào bên trong một vật thể có thể được đặt bên trong khung nội tuyến. Điều này hoạt động ok cho đến khi tôi cuộn iframe. Các tọa độ có thể phân chia không được cập nhật.

Vấn đề này được thể hiện trong này fiddle

Tôi đang sử dụng workaround dưới đây để thực hiện kéo và thả để iframe có thể ở nơi đầu tiên. Nó tính toán độ lệch bên phải nhưng không sử dụng bù cuộn của khung nội tuyến. Tôi đã thử nhưng không thể làm cho nó được tinh chỉnh để nó có thể di chuyển bù đắp vào tài khoản.

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

Có ai có đề xuất khắc phục sự cố không. Các khuyến nghị để đạt được cùng một điều theo một cách khác cũng được hoan nghênh hơn.

Answer 1

Bạn có thể thay đổi chiều cao proportions 's tùy thuộc vào lượng cuộn trong iframe. Số tiền có thể đạt được bằng $("iframe").contents().scrollTop() như bạn đã sử dụng nó để thay đổi số lượng cuộn:

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

Đây là DEMO.