Добавление значка в верхней части изображения

Question

Я связываю, чтобы добавить изображение на другое изображение, но оно не работает.

Вот мой код:

$(document).on('mousedown', '.step-wrapper img', function() {  
    $(this).resizable(); 
    $(".ui-wrapper").draggable(); 
    $(this).find(".ui-wrapper").append('<i class="icon-sort-up"></i>'); 
    $(".icon-sort-up").css("position", "absolute") 
}); 

Answer 1

.ui-обертка не является потомком $ (это), но родители, так что используйте родителя() вместо того, чтобы искать(). < I> прилагается к внешней стороне div.ui-wrapper, и свойство переполнения скрыто, поэтому вам нужно установить верхнее положение значка.

Было бы лучше перемещать изменяемые и перетаскиваемые функции в document.ready, потому что функции создают div каждый раз, когда вы нажимаете img.

Адрес my example. Я заменил < I> с < IMG>

Мой код:

$(document).ready(function(){ 
    $('.step-wrapper img').resizable(); 
    $(".ui-wrapper").draggable().append('<img class="icon-sort-up" src="http://thesimpsonplace.e-monsite.com/medias/album/images/76278889donut-1-jpg.jpg"/>'); 
}); 

$(document).on('mousedown', '.step-wrapper img.homer', function(){ 
    $(".icon-sort-up").css("z-index",1); 
}); 

CSS:

img.homer{ 
    width:100px; 
    height:100px; 
    cursor:pointer; 
    position:relative; 
} 
img.icon-sort-up{ 
    width:15%; 
    height:15%; 
    position:absolute; 
    top:0px; 
    z-index: -1; 
} 

HTML:

<div class="step-wrapper"> 
<img class="homer" src="http://www.boston.com/business/ticker/homer616.jpg"/> 
</div>