如何獲取圖像以轉到div的位置？

Question

克隆后如何將圖像放置到div的位置？

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

有人可以幫幫我嗎？

Answer 1

例子1

如果要將克隆的raindrop .appendTo(".shape")到div's位置，則應使用.appendTo(".shape")將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"> 

例子2

如果您不想將其附加到div，則use可以使用以下代碼：

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

Answer 2

要獲取div的位置，可以使用let top = $("div").css("top") ，然后設置圖片的值$("img").css("top",top)

Answer 3

var imgclone = targetdiv.clone()
    .offset({
    top: targetdiv.offset().top,
    left: targetdiv.offset().left
})