Как вставить элемент в DIV в позиции X Y

Question

Я пытаюсь создать веб-страницу, где пользователи могут вставить пин-код (например, карту Google) в между текстом с помощью контекстного меню.

Моя проблема в том, что я не знаю, как вставить штифт в точное положение. Используя DOM, я могу добраться только до ближайшего DIV (используя this ), но DIV содержит много текста и PIN-код должен быть расположен рядом с текстом.

Я могу получить положение щелчка мыши, используя pageX и pageY, но не знаю, как вставить элемент в этой позиции. Я попробовал в JQuery: insertAfter, prepend, append, но без получения желаемого результата.

Есть идеи, как решить эту проблему.

С уважением, Чоесанг Тензин

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

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

Answer 1

$("#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 2

Большое спасибо за все ваши идеи. Я придумал другой способ сделать это. Я использую «ДИАПАЗОН» для вставки непосредственно в зону щелчка (div), а не после или до нее и добавления z-индексов. Положительные моменты с этим:

1. Это действительно текст, а не слой

2. тексты обтекают булавку (текст освобождает место для булавки)

   $("div").click( function(e) {
       //the following works only for FF at the moment          
       var range = window.getSelection().getRangeAt(0);
       var pin = document.createElement('img');
       pin.setAttribute('src','pin_org.png');    
       pin.setAttribute('class','pin');                                                                    
       range.insertNode(pin);
   });           
   
   $("img.pin").live( 'mouseover', function () { 
   alert("hovered!!"); 
   

Answer 3

Установите стиль position:relaitve; для содержащего элемента div, чтобы он стал слоем. Таким образом, он работает как источник для абсолютно позиционированных элементов внутри него.