如何在DIV中插入一个元素到X Y位置

Question

我正在尝试创建一个网页，使用户可以使用上下文菜单在文本之间插入PIN（如Google地图）。

我的问题是我不知道如何在正确的位置插入PIN。使用DOM，我只能到达最近的DIV（通过使用this），但DIV包含很多文本，而PIN必须定位在文本旁边。

我可以使用pageX和pageY获取鼠标单击的位置，但不知道如何在该位置插入元素。我已经尝试了insertAfter、prepend、append等JQuery方法，但没有得到想要的结果。

有什么解决这个问题的想法吗？

敬礼， choesang tenzin

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

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

- Choesang

---

$("<div class='pin'/>").insertAfter(this); 这句话不应该改成 $("div.pin").insertAfter(this); 吗？ - Ryan Graham

Answer 1

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

对不起，我不记得如何从参数e中获取x和y。此外，您需要将鼠标单击的x、y坐标转换为相对于#content元素的坐标。

- Alex Reitbort

---

x/y有几个选项，并且在不同的浏览器中有一点混乱。很可能 jQuery 会将其封装得很好，但这里列出了原生选项（仅鼠标事件）：http://www.quirksmode.org/js/events_properties.html#position - annakata

非常感谢，它可以工作了！$（“#Content”）.rightClick（function（e）{ var x = e.pageX-5; var y = e.pageY - 18; $（“<div class ='pin' style ='top：”+ y +“px; left：”+ x +“px';></div>”）。insertAfter（this）; }）; - Choesang

Answer 2

非常感谢您提供的所有想法。我已经想到了另一种方法来实现它。 我正在使用“RANGE”直接插入到点击区域（div）中，而不是在其之前或之后，并添加z-indexes。这种方法的优点有：

1. 它真正地融入了文本，而不是作为一层

2. 文本围绕着图钉流动（文本为图钉留出空间）

   $("div").click( function(e) {
       //目前仅适用于FF
       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!!"); 
   

- tchoesang

Answer 3

在包含的 div 上设置样式 position: relative;，使其成为一个层。这样它就可以作为内部绝对定位元素的原点。

- Guffa