javascript - How to place a new element exactly where a user clicks? -

i project below, set when click on ball(pin), follows , when click second time, ball returns original parent, , newly created ball appended newly created div, appended parent of element in clicked.

my goal: have click exact point of newly created ball positioned.

issue: have alert shows coordinates of click, , when inspect element after clicking, shows newly created ball has acquired properties. problem is, not every time seem line clicked.

i'm getting dom manipulation, please explain in detail, how went solving problem.

here code reviewed:

http://codepen.io/jobenscott/pen/epzxzq

if (elementmouseisover != thefrigginpin) {       console.log("the 1 want, doesn't working further");      alert("x: " + relativex + " y:" + relativey);      elementmouseparent.append($newhiddenelement);      pinnedpinpositioned.appendto($newhiddenelement);      pinnedpinpositioned = brandnewpin.css({        left: relativex,        // left: e.clientx,        //top: e.clienty        top: relativey      });     } else if (elementmouseisover == thefrigginpin) {      console.log("hitthepin");     } else {      conosle.log("notquitesure");    } 

thanks!

your issue relativity. pin positioned absolutely text container. means values of left , top specify distances edge of container, setting these values based on full browser window in code.

to demonstrate: scroll down, in example, , try place pin. notice happens.

you either need remove margins/padding etc around container elements align window exactly, or compensate these in code. code better.

a suggestion:

• record mouse position when click pin.
• move pin around relative mouse using top , left parameters instead.
• when click, apply last values top , left.

this way, moving them around same means positioned , therefore guaranteed placed exactly.