Example 1
If you wish to move the duplicated raindrop to the same position as the div, simply use .appendTo(".shape"), which will add the image inside the div.
$(".raindrop1").clone().removeClass("raindrop1").appendTo(".shape");
$("img").css({
"left": "div".x,
"top": "div".y
});
.shape {
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">
Example 2
If you do not want to attach it to the div, you can utilize the code below:
$("img:not(.raindrop1)").css({
"left": $(".shape").position().left,
"top": $(".shape").position().top,
"position": "relative"
});
$(".raindrop1").clone().removeClass("raindrop1").appendTo("body");
$("img:not(.raindrop1)").css({
"left": $(".shape").position().left,
"top": $(".shape").position().top,
"position": "relative"
});
.shape {
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">