如何让拖动影响另一个元素下的元素

我正在制作一个类似于Google地图的地图系统，并在右上角有一个迷你地图视图。问题是，有时候，即使当我在迷你地图上开始拖动时，它也会以我想要的方式拖动底部位。有没有办法让这个事件通过mini地图div？提前致谢！如何让拖动影响另一个元素下的元素

Mini map display

编辑：这里是我的代码

 $('.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结构： http://jsfiddle.net/thaiscorpion/XCCYe/

：

<div class="Viewport"> 

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

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

</div>

下面是一个什么样的jsfiddle我工作

来源

2012-11-10 Thaiscorpion

它始终是一个好主意，包括在这个问题你的代码。 –

是的，你是对的谢谢。 – Thaiscorpion

我不太了解.draggable的工作方式，但我假设您希望将mousedown函数绑定到启动容器可拖动函数的迷你视口。 – VIDesignz

这可能有用...我没有办法但它。

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

你也可以尝试这个没有的preventDefault ...

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

来源

2012-11-10 08:20:21 VIDesignz

VIDesignz感谢您的帮助，但这不起作用，它只是使迷你地图上没有鼠标事件工作，但不让它通过。 – Thaiscorpion

@Thaiscorpion你可以设置一个小提琴吗？ http://jsfiddle.net – VIDesignz

现在要做：D – Thaiscorpion

欧凯我已经找到了一个解决方案，我最想不到的时候：d

如果我增加了微型在css中的地图：

pointer-events:none;

它使所有输入都通过该元素传递给下面的任何元素，工作grea牛逼！不要认为IE支持这个寿我仍然要检查，所以如果有人知道一个跨浏览器的方式让我知道。

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

来源

2012-11-10 17:33:36 Thaiscorpion

超棒的男人！干得不错！ – VIDesignz

它也适用于IE（11） – AllisonC

如何让拖动影响另一个元素下的元素

回答

相关问题