jQuery UIをiframeにソート可能にする

Question

ページにはiframeがあります。このiframeには、ソート可能でなければならないアイテムのコレクションがあります。すべてのJavascriptが親ページで実行されています。私は、iframeの文書にリストにアクセスして、コンテキストを使用してソート可能なを作成することができます。

var ifrDoc = $('#iframe').contents(); 

$('.sortable', ifrDoc).sortable({ cursor: 'move' }); 

実際にアイテムをソートしようとしたときしかし、私はいくつかの異常な振る舞いを取得しています。項目をクリックすると、スクリプトのターゲットが外側の文書に変わります。 iframeからマウスを離して移動すると、アイテムを移動してクリックすることで戻すことができますが、iframe内でそのアイテムと対話することはできません。

例：だからhttp://robertadamray.com/sortable-test.html

は、私が何をしたいのかを達成する方法があります - 好ましくはjQueryのUIコードの周りハッキング移動することなく？

Answer 1

のiframe（demo）にjQueryとjQueryのUIを追加します。

$('iframe') 
    .load(function() { 
     var win = this.contentWindow, 
      doc = win.document, 
      body = doc.body, 
      jQueryLoaded = false, 
      jQuery; 

     function loadJQueryUI() { 
      body.removeChild(jQuery); 
      jQuery = null; 

      win.jQuery.ajax({ 
       url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js', 
       dataType: 'script', 
       cache: true, 
       success: function() { 
        win.jQuery('.sortable').sortable({ cursor: 'move' }); 
       } 
      }); 
     } 

     jQuery = doc.createElement('script'); 

     // based on https://gist.github.com/getify/603980 
     jQuery.onload = jQuery.onreadystatechange = function() { 
      if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) { 
       return false; 
      } 
      jQuery.onload = jQuery.onreadystatechange = null; 
      jQueryLoaded = true; 
      loadJQueryUI(); 
     }; 

     jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     body.appendChild(jQuery); 
    }) 
    .prop('src', 'iframe-test.html'); 

更新：jQueryのUIが成り立つとjQuery UIだったためにページのwindowとdocumentへの参照を使用していますAndrew Ingram is correctロードされる。 jQuery/jQuery UIをiframeにロードすると、（外部のドキュメントではなくiframeの）正しい参照が得られ、期待どおりに機能します。

---

アップデート2：元のコードスニペットは、微妙な問題があった：動的なスクリプトタグの実行順序は保証されません。私はそれを更新して、jQueryの準備が整った後にjQuery UIがロードされるようにしました。

また、getifyのコードをload LABjs dynamicallyに組み込んだので、ポーリングは必要ありません。

Answer 2

あなたのコードが動作しない理由はわかりません。それがそうであるように見える。言っ

、ここではこの機能を実装するには、2つの代替の方法は次のとおりです。

1. あなたはiframe-test.htmlに親ドキュメントからあなたJavaScriptを動かし はiframe
   
   を変更することができます。これは、JavaScriptが実際に実行されている要素と結合するため、最もクリーンな方法です。
   
   http://dl.dropbox.com/u/3287783/snippets/rarayiframe/sortable-test.html

2. あなただけの代わりに、HTMLはiframeのコンテンツを取得するjQueryの.LOAD（）メソッドを使用して、親文書
   
   をコントロールしている場合。彼らのjavascriptのビットを果たした
   
   http://dl.dropbox.com/u/3287783/snippets/rarayiframe2/sortable-test.html

Answer 3

、キャンペーン・モニターは、基本的にはjQuery UIのカスタムバージョンを持っていることによって、これを解決します。 ui.mouseとui.sortableを変更して、ドキュメントとウィンドウへの参照を、問題の要素のドキュメントとウィンドウを取得するコードに置き換えました。 documentはthis.element[0].ownerDocument

になり、彼らは彼らがthis.element.window()または類似してwindowを置き換えることができますウィンドウと呼ばれるカスタムjQueryの機能を（）があります。動的

Answer 4

代わりのiFrameの内部でjQueryとjQueryUIをロードし、親と子の両方にjQueryUI相互作用を評価する - あなたは親の文書にバブルマウスイベントを簡単にすることができます：あなたはすべてのあなたのJavascriptを評価することができ

var ifrDoc = $('#iframe').contents(); 

$('.sortable', ifrDoc).on('mousemove mouseup', function (event) { 
    $(parent.document).trigger(event); 
}); 

この方法親の文書コンテキスト上にある。