动态添加图像顶部的元素

Question

当我点击按钮时，它必须在div中添加一个对象（img，p）和带边框的图像，然后获取该对象的位置（x，y坐标）。

如何使用JQuery进行此操作？

HTML ：

<div style="height: 440px; border: 1px solid; width: 880px; margin-top: 50px; margin-left: -12px;">
    <img id="imagem-principal" width="880" height="440" class="custom_media_image attachment-post-thumbnail" src="<?= $segunda_imagem; ?>">
</div>

Answer 1

要让按钮创建新的<img>并将其置于顶部，请添加以下样式：

div {
    position: relative;
}
img:not(#imagem-principal) {
    position: absolute;
}

然后，您可以在jQuery中添加onclick侦听器：

$("#addImg").click(function() {

    // set x and y to what you want
    var xCoor = // X_COORDINATE;
    var yCoor = // Y_COORDINATE;

    var newImg = $("<img src='/* IMAGE_URL */' />");
    newImg.css({left: xCoor, top: yCoor});
    $("div").append(newImg);
});

这将在另一个图像的顶部创建一个新的图像，其中x和y坐标。

请参阅JSFiddle.net上的工作示例。