How to insert an element in a div in XY position

Question

I am trying to create a webpage where users can embed output (e.g. google map) in between text using context menu.

My problem is that I do not know how to insert the pin into the exact position. Using the DOM, I can only get to the nearest DIV (using this ), but the DIV contains a lot of text and the PIN should be located next to the text.

I can get the mouse click position using pageX and pageY, but I don’t know how to insert an element at this position. I tried in jQuery: insertAfter, add, add, but don't get the desired result.

Any idea how to solve this problem.

Regards, choesang tenzin

 $("#Content").rightClick( function(e) {

    $("<div class='pin'/>").insertAfter(this); 
 });    

Answer 1

. . "RANGE" (div), , z-. :

• ,

• ( )

  $( "div" ). click (function (e) { // FF
    var range = window.getSelection(). getRangeAt (0);   var pin = document.createElement('img');   pin.setAttribute( 'SRC', 'pin_org.png');
    pin.setAttribute( '', '');
    range.insertNode(); });

  $( "img.pin" ). live ('mouseover', function() { ( "!!" ); });

Answer 2

$("#Content").rightClick( function(e) {
        var myTop = ...;
        var myRight= ...;
        $("<div class='pin' style='position:absolute; top: ' + myTop +'px; right: ' + myRight + 'px;/>").insertAfter(this); 
 });

, , x y e. , x, y x, y #content.

Answer 3

Set the style position:relaitve;in the containing div so that it becomes a layer. Thus, it works as a source for absolutely positioned elements within it.