在div上添加圖像css + jQuery

我有一個像樣式框的div。它使用jQuery UI進行拖動。拖動時，我想將圖像添加到框的頂部。圖像應該與盒子重疊，所以背景是不可能的。在div上添加圖像css + jQuery

如何添加此類圖片？我使用追加嗎？
可拖動框具有由jQuery UI設置的動態z索引。我如何確保附加圖片至少+1以上？

enter image description here

2011-08-26 santa

添加圖像與prepend，並把它絕對：

var $mainBox = $('#main-box') 
        .prepend('<img class="centered" src="..." />') 
        .css('position', 'relative'), 

    $img = $mainBox.find('.centered'); 

$img.css({ 
    position: 'absolute', 
    top: '-20px', // change this to whatever you want 
    left: ($mainBox.width() - $img.width())/2 
});

一個更好的辦法是有img還有一直以來，和只顯示/拖動時將其隱藏。這樣，您就可以將CSS保留在其所屬的位置，並且不必將元素進出DOM。

來源

2011-08-26 17:28:42

確實如此，但是在我拖動箱子之前，他們被定位在一邊，一個在另一個的上面。會不會形象，甚至隱藏那個位置？如果沒有，該代碼將如何顯示？ – santa

@santa：只要圖像位於div的內部，它就不會弄亂位置。 –

你是對的+1。我也認爲隱藏它會更好，因爲目前每次移動div都會附加另一個圖像...而我認爲在我的情況下，我需要另外一個以圖像集作爲背景的div，因爲當我放棄主 - 框我需要將圖像更改爲另一個。 – santa

你將有失去焦點放置另一個元素在您拖動第二個問題。您需要更改流程，以便可拖動元素中包含該框。

<div class="draggable-item"> 
<div class="show-on-drag"></div> 
<div class="box"></div> 
</div>

來源

2011-08-26 17:28:05 Kelly

在div上添加圖像css + jQuery

回答

相關問題