4

好的复杂的 - 我创建了一些代码来在包装器 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,000 像素 x 10,000 像素），因此我的包装 div 具有overflow:scroll.

问题是placeddivs不要停留在相对于container. 它们仅相对于wrapper.

我尝试过使用position:relative，但随后将放置的div“堆叠”在彼此之上（即，您不能在第一个上方添加第二个放置的div）。

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

（PS：我试图创建一个 Fiddle http://jsfiddle.net/7WQ5Q/20/但即使我已经从本地逐字复制（只是更改了 div 的名称以更有意义）它不会工作。从未使用过 JSFiddle之前所以我可能做错了什么）

任何帮助表示赞赏！

4

1 回答 1

7

几件事：

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

这是否涵盖了您试图完成的所有事情？

于 2012-12-31T02:37:57.393 回答