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

时间:2014-05-08 19:46:39

标签: javascript jquery html css

我有以下脚本,它获取容器的点击区域相对于其宽度和高度(而不是页面)的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/

1 个答案:

答案 0 :(得分:2)

变化     位置:相对;

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