UI/Sortable triggered from outside an iFrame

You may trigger a jQuery UI sortable within an iFrame from the parent window. But as the selectors do not select elements within another frame, you have first to select the iFrame, get its content and find the desired target by using jQuery's find method:

 
$('#theIFrame').contents().find('#theSortableTarget').sortable();
 

The sortable does work already. However, nothing seems to happen because the mouse events only bubbles up to the iFrame's document bounderies. As the context of the evaluated JavaScript code is the parent's document, we have to bind the mousemove and the mouseup events within the iFrame's context and to trigger from there the same events in the parent's context.

 
$('#theIFrame').contents().find('#theSortableTarget').on({
  mousemove: function(event) {
    $(parent.document).trigger(event);
  },
  mouseup: function(event) {
    $(parent.document).trigger(event);
  }
});
 

Ticker

03.01.12  -  Die Pause ist vorüber und wir sind mit neuem Tatendrang wieder an der Arbeit. Willkommen im 2012!

23.12.11  -  Wir wünschen allen frohe Festtage und einen guten Rutsch ins Neue Jahr!