如何允许拖动以影响另一个元素下的元素

Question

我正在创建一个类似于谷歌地图的地图系统，右上角有一个迷你地图视图。问题是，即使我在迷你地图上开始拖动，有时它也会妨碍我想要拖动底部位。有没有办法让这个事件通过迷你地图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/

Answer 1

Okey我找到了一个我最不期望的解决方案：D

如果我在css中添加迷你地图：

 pointer-events:none; 

它使所有输入通过该元素传递到下面的任何元素，效果很好！不要认为IE支持这个我仍然需要检查，所以如果有人知道跨浏览器的方式让我知道。

以下是有关指针事件的一些信息：
https://developer.mozilla.org/es/docs/CSS/pointer-events

Answer 2

这可能有用......我无法测试它。

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

您也可以在没有preventDefault ...

的情况下尝试此操作

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