JQuery/CSS:使用鼠标坐标和位置追加div:绝对

Question

>确定复杂的一个 - 我创建了一些代码来在包装器div 中附加一个div：

$("#container").click(function(e){
var parentOffset = $(this).parent().offset(); 
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('#container').append('<div class="placeddiv" style="left:' + relX + '; top:' + relY +';"></div>');

如果placeddiv设置为position: absolute;，则此方法正常工作

但是，我的containerdiv 故意很大(10,000px x 10,000px)，因此我的包装器divoverflow:scroll.

问题是placeddivs不要停留在相对于container的一个位置。它们仅相对于wrapper保持位置。

我尝试使用position:relative但随后放置的div"堆叠"在彼此之上(即您不能在第一个上方添加第二个放置的ddiv)。

有谁知道解决这个问题的方法？

(PS：我试图创建一个小提琴 http://jsfiddle.net/7WQ5Q/20/但即使我从我的本地逐字复制(只是更改了div 的名称以使其更有意义)，它也不起作用。以前从未使用过JSFiddle，所以我可能做错了什么)

任何帮助不胜感激！

Answer 1

几件事：

1. 有一个JS错别字
2. 如果要像这样设置位置，则需要指定 px。
3. 您的容器需要具有位置：相对
4. 您需要自己考虑滚动

看看这个从你的分叉的工作小提琴(用更干净的代码更新)： http://jsfiddle.net/wWEqP/5/

$("#container").click(function(e){
var wrapper = $(this).parent();
var parentOffset = wrapper.offset(); 
var relX = e.pageX - parentOffset.left + wrapper.scrollLeft();
var relY = e.pageY - parentOffset.top + wrapper.scrollTop();
$(this).append($('<div/>').addClass('placeddiv').css({
left: relX,
top: relY
}));    
});

这是否涵盖了您要完成的所有内容？