2

右上にミニマップビューがあるグーグルマップに似たマップシステムを作っています。問題は、ミニマップでドラッグを開始しても、下のビットをドラッグできるようにしたい場合があることです。このイベントをミニマップdivに通す方法はありますか？前もって感謝します！

ミニマップ表示

編集：これが私のコードです

        $('.Container').draggable({ 
              containment: "parent", 

              drag: function(event, ui) {   
                    var newLeft = (parseInt($('.Container').css('left'), 10)/-5)+80;
                    var newTop = (parseInt($('.Container').css('top'), 10)/-5)+80;                                              
                    $('.mini-viewport').css({'top': newTop, 'left': newLeft});                                      

            }

        });

そして私のhtml構造：

<div class="Viewport">

    <div class="mini-map">
        <div class="mini-viewport"></div>
    </div>

    <div class="Constrainer">    
        <div class="Container"></div>
    </div>  

</div>

これが私が取り組んでいるもののJsFiddleです：http： //jsfiddle.net/thaiscorpion/XCCYe/

4

2 に答える 2

3

わかりました、私はそれを最も期待していなかった解決策を見つけました:D

css でミニマップに追加すると:

 pointer-events:none;

すべての入力がその要素を通過し、その下の要素に渡されます。うまく機能します! IE がこれをサポートしているとは思わないでください。まだチェックしなければならないので、クロス ブラウザの方法を知っている人がいたら教えてください。

ポインターイベントに関する情報は次のとおりです:
https://developer.mozilla.org/es/docs/CSS/pointer-events

于 2012-11-10T17:33:36.793 に答える
0

これはうまくいくかもしれません...私はそれをテストする方法がありません。

$('.mini-map').on('mousedown',  function (e){
     e.preventDefault();
    $('.container').mousedown();
});

preventDefault なしでこれを試すこともできます...

$('.mini-map').on('mousedown',  function (){
     $('.container').mousedown();
});
于 2012-11-10T08:20:21.050 に答える