最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - JQueryCSS: Append div using mouse coords and position: absolute - Stack Overflow

programmeradmin7浏览0评论

OK plicated one - I have created some code to append a div within a wrapper 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>');

This works ok if the placeddiv is set to position: absolute;

However, my container div is intentionally large (10,000px by 10,000px) and thus my wrapper div has overflow:scroll.

The issue is the placeddivs do not stay in the one position relative to the container. They only stay positioned relative to the wrapper.

I have tried using position:relative but then the placeddivs 'stack' on top of each other (ie you cannot add a 2nd placeddiv above the first).

Does anyone know a way around this?

(PS: I have tried to create a Fiddle / but even though I have copied from my local verbatim (just changed names of divs to be more meaningful) it wont work. Never used JSFiddle before so I could be doing something wrong)

Any help is appreciated!

OK plicated one - I have created some code to append a div within a wrapper 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>');

This works ok if the placeddiv is set to position: absolute;

However, my container div is intentionally large (10,000px by 10,000px) and thus my wrapper div has overflow:scroll.

The issue is the placeddivs do not stay in the one position relative to the container. They only stay positioned relative to the wrapper.

I have tried using position:relative but then the placeddivs 'stack' on top of each other (ie you cannot add a 2nd placeddiv above the first).

Does anyone know a way around this?

(PS: I have tried to create a Fiddle http://jsfiddle/7WQ5Q/20/ but even though I have copied from my local verbatim (just changed names of divs to be more meaningful) it wont work. Never used JSFiddle before so I could be doing something wrong)

Any help is appreciated!

Share Improve this question asked Dec 31, 2012 at 2:28 MeltingDogMeltingDog 15.5k52 gold badges178 silver badges322 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

Couple of things:

  1. there was a JS typo
  2. you need to specify px if you're going to set the position like that.
  3. your container needs to have position: relative
  4. you need to account for the scrolling yourself

See this working fiddle forked from yours (updated with cleaner code): http://jsfiddle/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
    }));    
});

does that cover everything you were trying to acplish?

发布评论

评论列表(0)

  1. 暂无评论