单击对象时获取对象的位置

时间:2014-01-23 14:39:59

标签: javascript jquery html

我当前的jFiddle:http://jsfiddle.net/3HauW/85/

当你在页面上移动时显示bean 1(方框1)的位置,但是我如何显示第二个方框的位置?我希望它能够显示我点击的任何位置。

因此,如果我点击框1并移动它,它将显示第一个框的X和Y

如果我在方框2上舔并移动它,它应该显示第二个方框的X,Y。

这是代码中显示X和Y位置的部分:

   $( "*", document ).on('click',function( event ) {
            var offset = $( "strong" ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

另外,为什么id未定义?

5 个答案:

答案 0 :(得分:1)

id未定义,因为.offset()方法中没有ID。你在做什么

$( "strong" ).offset().id

和offset只返回top和left,没有id。这就是它未定义的原因。

现在处理它返回第一项的问题。代码

var offset = $( "strong" ).offset();

也只是查看一个元素,如果你想要点击你将使用这个

var elem = $(this);
var offset = elem.offset();

并获取ID

elem.attr("id);

答案 1 :(得分:1)

我认为你的想法是这样的:

http://jsfiddle.net/3HauW/86/

而不是:

var offset = $( "strong" ).offset();

我做到了这一点:

var offset = $( this ).offset();

检查小提琴,看看是否有效

对于id,您还应该将其更改为$(this).id

http://jsfiddle.net/3HauW/88/

但您必须将ID添加到元素中。

答案 2 :(得分:1)

尝试:

$( "*", document ).on('click',function( event ) {
            var offset = $( this ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

编辑:

由于id未定义,它是父节点的一部分,您必须注意到您在每个bean中选择的节点可以是不同的,并且对该属性的访问可以是可变的(this,this.parentNode等),所以你需要将它放在正确的位置或将事件处理程序设置为特定的元素。

答案 3 :(得分:1)

:此:

var offset = $( "strong" ).offset();

应该是这样:

var offset = $( this ).offset();

未定义ID:

对于未定义的id,首先对于offest()方法没有.id。其次,唯一具有id的元素是后面的容器。当你点击方框时,你实际上是点击前面的div或p,而不是后面有id的那些。因此,如果你想要一个id,你需要将它添加到p或div前面。

这是 fiddle

答案 4 :(得分:1)

draggable有一个内置停止事件

因此使用它可能是有意义的。

类似这样的事情:

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

做了一个小提琴: http://jsfiddle.net/filever10/8MVT9/

并且ID未定义,因为$( "strong" ).offset().id不正确,它必须是$( "strong" ).prop('id')或等效的。虽然strong没有ID,但它仍然无法运作......您需要ID .normal& .failure让它做你想做的事。