javascript - JQuery 在鼠标点击位置定位一个元素

Question

我有以下脚本，它获取容器点击区域相对于其宽度和高度(不是页面的)的 X 和 Y 坐标。

这里是点击的 x 和 y(函数的返回值):

var x = 7;
var y = 13;

现在我想使用它的返回值在单击鼠标的同时定位一个元素。

这是我在获取坐标后立即执行的操作:

$(this).append("<div style='width: 10px; height: 10px; background-color: red; " +
                "position: relative; left:"+ relX +"px; top: "+ relY +"px;'></div>");

创建并放置在容器中。但问题是我被完全对称地放置。我改变了左 ro 右，反之亦然，但没有任何变化，当我从右到左改变时，我希望它能工作，但它太过分了。

这是 JSFiddle:

http://jsfiddle.net/F3XRj/

Answer 1

改变 position:relative；

到 position:absolute；

完成后，定位计算必须考虑边距和偏移量。最简单的方法是使用 jQuery..

var handler = function (oEvent)
{
     var Element     = $(this); // get the container

     var oOffset     = Element.offset();
     var Height      = Element.outerHeight();
     var Width       = Element.outerWidth();
     var PosY        = oOffset.top  + Height - oEvent.pageY; // Not necessarily needed for this situation, but useful
     var PosX        = oOffset.left + Width  - oEvent.pageX; // Not necessarily needed for this situation, but useful
     var MarginT     = Element[0].style.marginTop  ? parseInt(Element[0].style.marginTop ) : 0;
     var MarginL     = Element[0].style.marginLeft ? parseInt(Element[0].style.marginLeft) : 0;

     if (Element[0].style)
     {
        Element[0].style.top      = (Element[0].offsetTop  - MarginT) + "px";
        Element[0].style.left     = (Element[0].offsetLeft - MarginL) + "px";
     }
}

*以上代码对于您的情况并不完整，但提供了调整您的代码所需的信息，以及使用 css 属性实现此目标的计算的有力示例，尽管容器位置或边距