jQuery動態地將可鏈接圖像圖標定位在可拖動圖像

有人能告訴我如何動態覆蓋圖像右上角的圖像（圖標在我的情況下），無論圖像的大小如何。它需要能夠使用可拖動的用戶界面，因此當圖像被移動時，被覆蓋的圖標保持在其位置上。jQuery動態地將可鏈接圖像圖標定位在可拖動圖像

我對jQuery相當陌生，我嘗試了很多東西，但無法一起獲得工作示例。最後，圖標需要可鏈接，以便我可以爲其分配onClick功能。

任何人都可以給我看一些例子，或者指出我朝着正確的方向嗎？

我使用的是最新版本的jQuery。

2012-05-17 Jared

由於您希望圖標最終可點擊，因此我會避免使用含有元素的:after來顯示圖標。所以，它的寬度（和高度匹配，爲最

<div class="draggable-image"> 
    <img src="http://placekitten.com/100/100" /> 
    <img src="help.png" class="icon" /> 
</div>

然後我會樣式的容器是inline-block，：相反，我會用一個簡單的div包裝既您拖動圖像，和裏面的圖標部分）其子img。這也是定位在容器內的圖標的好時機：

.draggable-image { 
    position: relative; 
    display: inline-block; 
} 
.draggable-image img.icon { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
}

現在我們可以綁定了可拖動的情況下，參照從提供給我們的各種可拖動的方法ui.helper對象中拖動圖像：

$(".draggable-image").draggable({ 
    stop: function(event, ui) { 
    alert($("img:first", ui.helper).attr("src")); 
    } 
});

注意我訪問:first圖片，避開我們的.icon圖片。最後，我們可以將部分點擊邏輯綁定到我們的.icon，使我們可以對人反應過來一下吧：

$(".draggable-image .icon").on("click", function(){ 
    alert("You've clicked the icon"); 
});

演示：http://jsbin.com/ihugas/3/edit

來源

2012-05-17 13:47:23 Sampson

這也不錯！如果圖片/ div的大小是動態的呢？我將如何解釋這一點？謝謝您的幫助！ – Jared

@ user993514在我的答案底部查看我的更新。 – Sampson

謝謝！這變得如此接近。測試這段代碼我看到圖標不在右上角。我將如何動態地影響圖標的位置？ – Jared

定位包含div的絕對左上角的圖標（其中包含原始「背景」圖像）。使用可拖動的方式拖動div：http://jqueryui.com/demos/draggable/

來源

2012-05-17 13:46:20 FiveTools

難道你不換他們兩個在一個「位置：親屬」股利和使div可拖動？然後將圖像的z-index設置爲1，將圖標設置爲2，這樣它總是位於頂部？然後你可以在圖標上使用「position：absolute; right：0px; top：0px」。

所以類似這樣的

http://jsfiddle.net/qJHuf/1/

但DIV圖像配將是一個圖像，並.holder將可拖動

來源

2012-05-17 13:51:13 TommyBs

這很好。如果圖片/ div的大小是動態的呢？我將如何解釋這一點？謝謝您的幫助！ – Jared

它應該可以工作，它是需要位置的圖標。可能只需要玩一下風格 – TommyBs

有沒有一種奇特的方式來根據圖像的高度和寬度動態設置圖標的位置？ – Jared

jQuery動態地將可鏈接圖像圖標定位在可拖動圖像

回答

相關問題