Question

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

我的问题是我不知道如何将针插入确切的位置。使用DOM我只能到达最近的DIV（使用这个），但DIV包含许多文本和PIN必须放在文本旁边。

我可以使用pageX和pageY获取鼠标点击的位置不知道如何在该位置插入元素。我试过JQuery： insertAfter，prepend，append但得不到想要的结果。

知道如何解决这个问题。

的问候， choesang tenzin

 $("#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); 
 });

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

Answer 2

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

Answer 3

非常感谢您的所有想法。我想出了另一种方法。我正在使用“RANGE”直接插入单击的区域（div），而不是在它之后或之前并添加z-index。对此的积极意义是：

它真的是在文本中，而不是作为一个层

文本在引脚周围流动（文本为引脚留出空间）

$("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!!");

如何在位置X Y的DIV中插入元素

3 个答案: