在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

回答

相关问题