1

私の問題:iframeの外側からドラッグ可能なウィジェット(ここではjsliderなど)を作成する必要があります。Container と iframe の両方のコンテンツは、同じオリジンからのものです。問題は、jQuery が mousemove イベントを間違ったドキュメント オブジェクトにアタッチしていることです。

http://jsfiddle.net/techunter/4pnxh

スライダーを動かしてみてください。マウスが iframe の外側でイベントをトリガーした場合にのみ移動できます。助けてください、ここで立ち往生しています

編集: JQuery は、スライダー ハンドルのクリックをリッスンし、クリック イベントで、フレームではなくウィンドウ内で mousemove に新しいリスナーを作成します。jquery lib を変更してコンテキスト (デフォルトでは window.document) を追加することを検討していますが、時間がかかります。

4

1 に答える 1

2

これに対する回避策は次のとおりです。

  • スライダーは実際にはデフォルトでは機能しないため、開始時に何も呼び出さないでください

  • JavaScriptマウスがスライダー内で押されている間、スライダーの値を設定する関数を作成します。

  • 押されている間、ui-slide-handle がその親への参照を返すようにする必要があります。

このソリューションは、すべての主要なブラウザーで機能します。

$(function(){

  $('iframe').ready(function(){
     var $document = $('#result iframe',$('#main').contents()).contents();
     $('.slider',$document).slider({
          //Prevent the slider from doing anything from the start
          start:function(event,ui){return false;}
     });


     $(document).mouseup(function(){
         $('.slider,.ui-slider-handle',$document).unbind('mousemove') 
     })

     //While the ui-slider-handle is being held down reference it parent.
     $('.ui-slider-handle',$document).mousedown(function(e){
        e.preventDefault();
        return $(this).parent().mousedown()})

     //This will prevent the slider from moving if the mouse is taken out of the
     //slider area before the mouse down has been released.                
     $('.slider',$document).hover(function(){

        $('.slider',$document).mousedown(function(){
           $(this).bind('mousemove',function(e){

                //calculate the correct position of the slider set the value
                $(this).slider('value',e.pageX*100/$(this).width())
           });             
        }).mouseup(function(){
             $(this).unbind('mousemove');
        })},function(){
        $( '.slider',$document ).unbind('mousemove'); 
     })          
    })
    });

ソリューションのリンク:

解決

于 2012-06-22T19:57:59.880 に答える