JQuery/CSS:使用鼠标坐标和position:absolute附加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×10,000px),因此我的包装div有overflow:scroll.

问题是placeddivs不要留在相对于的一个位置container.他们只相对于wrapper.

我已经尝试过使用position:relative但是然后putdivs'堆栈'在彼此之上(即你不能在第一个之上添加第二个放置的dd).

有没有人知道这方面的方法？

(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
    }));    
});

这涵盖了你想要完成的一切吗？