admin管理员组文章数量:1331849
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 badges1 Answer
Reset to default 7Couple of things:
- there was a JS typo
- you need to specify px if you're going to set the position like that.
- your container needs to have position: relative
- 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?
本文标签: javascriptJQueryCSS Append div using mouse coords and position absoluteStack Overflow
版权声明:本文标题:javascript - JQueryCSS: Append div using mouse coords and position: absolute - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742274592a2444955.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论