Jquery拖放到iframe并在其中排序

Question

我想将元素拖放到 iframe 中并在 iframe 中对其进行排序

这是我的代码：

<div class="draggable">
   <img class="img" width="50%" src="http://www.skrenta.com/images/stackoverflow.jpg">
</div>

<iframe id="phone-iframe" width="100%" height="100%" src="iframe.html" frameborder="0"></iframe>

<script>
$(document).ready(function(){
    $('#phone-iframe').load(function () {
        $('#phone-iframe').contents().find('.sortable').sortable({
            connectWith: ".sortable",
            revert: true
        });
        $( ".draggable" ).draggable({
            connectToSortable: $('#phone-iframe').contents().find('.sortable'),
            iframeFix: true,
            helper: "clone",
            revert: "invalid",
            zIndex: 2,
            opacity: 0.74,
            appendTo: 'body',
            distance: 15
        });
    });
});

iframe 代码：

<ul class="sortable">
  <li>I'm sortable</li>
  <li>Me too</li></ul> 

它正在工作，但 iframe 上存在位置问题。当您将内部拖动到 iframe 时它不起作用（如果我将 iframe 位置更改为 0px X 0px 它可以工作。）

这是我的代码：http://tekdogru.com/iframexample/

Answer 1

我找到了一个代码，它是 jQuery UI 拖入 iframe 问题的绝佳解决方案，将此代码添加到您的 jquery ui 文件中即可。

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

这里是来源：http://blog.craigsworks.com/jquery-ui-draggable-droppables-in-an-iframe/