javascript - How do I get an image to go to the position of a div? -

how image div's position when cloned?

$(".raindrop1").clone().removeclass("raindrop1").appendto("body");  $("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%;  }

<div class = "shape" onclick = "curse()"></div>  <img src = 'http://images.clipartpanda.com/raindrop-clipart-rtgdn5btl.png' width = "15px" class = "raindrop1">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>

can please me?

example 1

if want cloned raindrop div's position should use .appendto(".shape") insert img, 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 dont want append div, use can use following code:

$("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">