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>");

创建获取，并将其放入容器中。但问题是我完全对称放置。我已经改变了左转，反之亦然，但没有任何改变，当我从右向左改变时，我希望它能够工作，但它只是变得太过分了。

这是JSFiddle：

http://jsfiddle.net/F3XRj/

Answer 1

变化位置：相对;

要 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属性实现此目标的强大示例，尽管容器位置或边距

JQuery在鼠标单击位置定位元素

1 个答案: