在div中克隆图像

Question

在我编写的代码中，我试图从列表内部克隆图片并将其插入div中。 该图像也可以拖动到div。

供参考，这就是我的HTML代码中包含图像的方式

  <img id="drag1" src="https://pixabay.com/get/19b738fe047c3bf9d39b/1440605897/smiley-163510_1280.jpg?direct" draggable="true" ondragstart="drag(event)" width=200px length=200px>

这是我的test.js代码的一部分：

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

  $('#drag1').clone().insertAfter("#maindiv");

});

我有两个问题。

1. 我如何将其复制到我的div中。 我只知道.insertAfter或.insertBefore

2. 目前，我可以将其插入到想要的div之后插入克隆映像，但是克隆的映像位于另一个映像的后面。 我怎样才能让它出现在前面。 我尝试更改2张图片的z-index，但它没有更改克隆图片的任何内容，它仍然位于另一张图片的后面。

Answer 1

评论者是正确的，请使用.appendTo()而不是.insertAfter() 。 为了使图像遵守z-index ，它必须相对或绝对定位，因此在CSS中：

<some-image-selector-rule> {
   position: absolute; --or--
   position: relative;
}

Answer 2

您的问题是两个方面。 首先是如何插入图像。 为此，jQuery有几种有用的方法，包括.append() .appendTo .html() .appendTo等。有关jQuery DOM操作功能的完整列表，请参见此列表 。

关于您的问题。 一个简单的解决方案是使用：

$("#buttona").click(function () {
    $('#drag1')
        .clone()
        .attr('id', 'drag2')   // <-- Note this line
        .appendTo("#maindiv");
});

请注意添加的.attr('id', 'drag2') 。 在DOM中具有相同ID的两个元素是无效的。 克隆元素后，您需要更改ID。

至于第二个问题， z-index仅适用于包含position属性的元素。 请参阅此 MDN文章以供参考。 要使此图像显示在其他图像之上，您需要修改CSS：

#drag2 {
    position: relative;
    z-index: 1;
}

或内联CSS作为上一个操作的一部分：

$("#buttona").click(function () {
    $('#drag1')
        .clone()
        .attr('id', 'drag2')
        .css({ 'position': 'relative', 'z-index': 1 })
        .appendTo("#maindiv");
});

通过将图像放置在正确的位置（即在<div>而不是其后），可以为您解决z-index问题。 首先尝试该修复程序，看看是否确实需要z-index 。