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;，那么它可以正常工作。但是，我的container div故意设置得很大（10,000px x 10,000px），因此我的包装器div具有overflow:scroll的属性。问题在于placeddivs不会相对于container保持在同一个位置上。它们只会相对于wrapper保持定位。我尝试使用position:relative，但这时placeddivs会“堆叠”在一起（即您无法在第一个div上方添加第二个div）。有谁知道有没有解决方法？（PS：我已经尝试创建了一个Fiddlehttp://jsfiddle.net/7WQ5Q/20/，但即使我从本地逐字复制（只改变了div的名称以使其更有意义），它也无法工作。我以前从未使用过JSFiddle，所以我可能做错了什么。）感激任何帮助！

- MeltingDog

Answer 1

有几个要点：

1. 存在JS的拼写错误
2. 如果您要像那样设置位置，则需要指定px。
3. 您的容器需要具有position: relative属性
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
    }));    
});

你想要完成的所有内容都已经涵盖了吗？

- Levi