在div css + jQuery之上添加图像

Question

我有一个像盒子一样的div。它是使用jQuery UI拖动的。当它被拖动时，我想在框的顶部添加一个图像。图像应该与框重叠，因此背景是不可能的。

1. 如何添加此类图片？我是否使用追加？

2. 可拖动框具有由jQuery UI设置的动态z-index。如何确保附加图像至少为+1？

Answer 1

使用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。

Answer 2

第二次将另一个元素放在拖动上时，你会遇到失去焦点的问题。您需要更改流量，以便可拖动元素在其中包含框。

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