根據點擊位置將圖像插入到DIV中

Question

我試圖根據用戶點擊的位置在div中插入圖像。這似乎工作正常，除非div是可滾動的，然後無論我們滾動到哪裏，圖像的位置都保持不變。圖片應該保留在相對於div內的相同位置。

JSFiddle

代碼：

$("#a").on("click",function(e){ 

    var top=e.pageY-$(this).position().top, 
     left=e.pageX-$(this).position().left; 

    $('.imgajoutee').remove(); 
    $(this).append("<img src='https://upload.wikimedia.org/wikipedia/commons/0/0c/Dive_hand_signal_OK_1.png' class='imgajoutee' style='top:"+top+"px;left:"+left+"px;'/>"); 

}); 

Answer 1

有幾件事情你需要做的：

• 更改img CSS所以它的position值absolute，而不是fixed
• 您還需要更改你的容器（在這種情況下#a）有一個position:relative
• 最後，你的計算top應改爲使用.offset()而不是position()並添加.scrollTop()值的容器。這將計算容器已滾動的數量。

所有這些事情考慮，see updated JSFiddle：

CSS

#a { position:relative; } 
img { position: absolute; } 

JS

$("#a").on("click",function(e) { 
    var top = $(this).scrollTop() + e.pageY - $(this).offset().top, 
     left = e.pageX-$(this).offset().left; 
    ... 
});