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 回答