Using jQuery sortable inside an iframe

问题

I'm trying to load some html in an iframe and make certain elements in that html page sortable:

jsfiddle

JS:

var _iframe = $('iframe');
var containment = _iframe.contents().find( "modules" );
if(containment.data('sortable')) containment.sortable('destroy');

containment.sortable({
    stop: function (event, ui) {
        console.log('STOP: I am never called');
    },
    start: function (event, ui) {
        console.log('START: I am called with a delay!');
    },
    containment: containment,
    placeholder: "sortable-placeholder",
    items: "> module",
    delay: 10,
    forcePlaceholderSize: true,
    helper: 'clone',
    zIndex: 10000
});

This causes some unexpected behavior like delayed start event and no stop event at all

The problem occurs only if the content is inside an iframe. Here's a version without iframe (and how it should work)

Try to sort the elements in this version (and keep you console open)

回答1:

Seems the only working solution is to put the code in the iframe. Maybe the iframe doesn't like it when it's parent clean up his room...

来源：https://stackoverflow.com/questions/19274439/using-jquery-sortable-inside-an-iframe