Estoy tratando de implementar jQuery Draggable | Droppable | Sortable entre un marco principal y secundario. Tengo un prototipo de este pero hay un comportamiento extraño sucediendo

win = document.getElementById('frame').contentWindow;

element = win.document.getElementById('sortable');
$(element).sortable();
console.log(element);
$( "#draggable" ).draggable({
      connectToSortable: $(element),
     iframefix: true,
    helper: function() {return $("<div/>").css('background-color','red');}
});

La página de iframe también contiene

$("#sortable").sortable();

Aquí está el jsfiddlehttp://jsfiddle.net/vxAzs/5/

Funciona bien cuando intento soltar el elemento en el iframe, pero cuando trato de ordenar los elementos en el iframe, el elemento se adhiere al evento de clic de ambas páginas, creo (de modo que no se suelta hasta que hago clic en ambos elementos principales). y iframes). Creo que es algo que ver con la llamada .sortable () tanto en el padre como en el iframe, pero si elimino eso, el dropable deja de funcionar.