Клонирование изображения внутри 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, которого я хочу, но клонированное изображение находится за другим изображением. Как я могу заставить его появиться впереди. Я попытался изменить z-индекс на 2 изображения, но он ничего не изменил для изображения клона, он все еще находился за другим изображением.

Answer 1

Комментатор правильно, используйте .appendTo() вместо .insertAfter(). Для изображения уважать z-index, она должна быть относительно или абсолютно позиционирован, так что в вашем CSS:

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

Answer 2

Ты вопрос состоит в два раза. Первое - как вставить изображение. Для этого jQuery есть несколько полезных методов, включая .append(), .html(), .appendTo и т. Д. Полный список функций манипуляции jQuery DOM приведен в этом list.

На ваши вопросы. Простое решение было бы использовать:

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

Примечания добавленного .attr('id', 'drag2'). Недопустимо иметь два элемента внутри DOM с одинаковым идентификатором. Когда вы клонируете элемент, вам нужно будет изменить идентификатор.

Что касается вашего второго вопроса, то z-index применим только к элементам, которые содержат атрибут position. См. Статью this 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"); 
}); 

Вы z-index проблема может решим для вас, поставив изображение в нужное место (т. е. внутри <div> вместо него). Попробуйте исправить сначала, чтобы увидеть, действительно ли нужен z-index.