使用jQuery UI啓用拖動疊加層下面的元素

Question

我有一個不尋常的情況，我想要啓用拖放和重新調整大小到位於HTML中另一個圖像疊加層後面的圖像。它看起來像這樣。

在後臺（即：可樂瓶）圖像使用jQuery UI製成可調整大小和拖動。然而，問題在於在點擊重疊圖像的邊界時嘗試拖動圖像。這顯然失敗了，因爲疊加的圖像位於可拖動元素的頂部，只是一個透明度。

這是使用的html和javascript。

$(".Overlay").draggable({ containment: "#divPhone", scroll: false }).resizable(); 

<div id="divPhone" style="position: relative;"> 
    <div style="display: inline-block;" class="Overlay"><img src="ImageSource.png" style="width: 100%;height: 100%;" /></div> 
    <div style="position: absolute; left: 85px; top: 0px;"><img src="ImageSource.png" style="width: 240px;" /></div> 
</div> 

任何人都可以爲這個問題提出任何解決方法嗎？我能想到的唯一解決方案是在點擊事件發生時切換圖像的索引，但假設必須有更好的解決方案。

Answer 1

正如我在評論中提到的，您可以將CSS發送到pointer-events:none;。

這可能不適用於IE（所有版本），除非您使用的是SVG元素。看起來他們投票選擇刪除pointer-events，因爲你可能會劫持其他人的鏈接。

正如其他人在類似問題的答案中提到的，您可以使用document.elementFromPoint方法的forward the events through layers。使用簡單的顯示/隱藏技術，您可以簡單地隱藏遮罩層，檢查底下的點，並重新顯示遮罩層。這種情況發生得非常快，瀏覽器不會使掩碼消失。然而，既然你想拖動和調整大小，當你移動鼠標時會觸發很多事件，所以你可能會注意到這種技術非常滯後。

Answer 2

嗯，如果我正確理解這一點;我認爲可以使用稍微不同的HTML標記來實現，並改變溢出。這將緩解分層元素的問題。

<div id="phone"> 
    <!-- 
    The phone screen, the "white bit" of the phone; the position and dimensions 
    of this will need to be changed. 
    --> 
    <div id="phone_screen" style="overflow: hidden"> 
     <img id="phone_img" /> 
    </div> 
</div> 

• #phone用作容器，基本上包裹電話 屏幕和圖像
• #phone_screen用作被移動和調整大小
• #phone_img它被設置爲可拖動的主圖像的圖像容器並可調整大小。

有了這種結構，圖像應該是可拖動和可重新定義的。值得添加一些填充到#phone_screen以確保用戶可以到達圖像的邊緣來調整它的大小。

Answer 3

這裏是更多的JavaScript式的方法來完成你正在嘗試做的事：

http://jsfiddle.net/nL5ew/

基本上我在包裝中加入了第三個元素。一個div，它將充當將被拖動和調整大小的圖像的不可見處理。然後使用jquery ui中的事件進行拖拽和調整大小，我確保圖像模仿手柄正在做什麼。調整大小爲alsoResise提供了一個方便的選項，使這一點更容易。

使用這種方法，「處理程序」現在處於頂部，因此可以點擊背景圖像的任何位置。

HTML：

<div id='workbox'> 
    <img src="http://tryimg.com/4/01.png" id="drag-resize-me" /> 
    <img src="http://tryimg.com/4/phone.png"id="phone"/> 
    <div id="handle"></div> 
</div> 

CSS：

#workbox{ 
    width: 401px; 
    height: 511px; 
    position: relative; 
    border: 5px #000 solid; 
    overflow: hidden; 
} 
#phone{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#drag-resize-me{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#handle{ 
    border: 1px #ccc solid; 
} 

JAVASCRIPT：

$(function(){ 
    $('#handle').css('height',$('#drag-resize-me').height()).css('width',$('#drag-resize-me').width()); 
    $("#handle").draggable({ 
     drag: function(event,ui) 
     { 
      $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top); 
     } 
    }); 
    $("#handle").resizable({ 
     alsoResize:'#drag-resize-me', 
     handles: 'all', 
     resize: function(event,ui) 
     { 
      $('#drag-resize-me').css('left',ui.position.left).css('top',ui.position.top); 
     } 
    }); 
});