滚动iframe中的jQuery UI dropzone错误偏移量

我遇到了jQuery-UI可拖动和拖放的问题。 我需要拖放放置在iframe中的可拖放内容。 这工作正常，直到我滚动iframe。 可放置的坐标不会更新。

这个问题在这个小提琴中得到了证明

我正在使用下面的解决方法，首先将拖放到iframe中。 它会计算正确的偏移量，但不会使用iframe的滚动偏移量。 我尝试过，但无法调整，因此需要考虑滚动偏移量。

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

有没有人有解决这个问题的建议。 以另一种方式实现同​​样目标的建议也非常值得欢迎。

---

您可以根据iframe的滚动量更改proportions的高度。 这个数量可以用$("iframe").contents().scrollTop()就像你用它来改变滚动量一样：

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

这是DEMO 。

链接地址: http://www.djcxy.com/p/25739.html

上一篇: jQuery UI dropzone wrong offset inside scrolled iframe

下一篇: How to fix a regex that attemps to catch some word and id?