Question

我有一个圆圈和一个徽标，圆圈可以通过jQuery UI拖动。我一直在寻找方法来创建一个功能，以检测圆圈和徽标的碰撞，而不依赖于插件。但是，它似乎不起作用，我不知道为什么。

以下是代码：

var logoTop = $('#logo').offset().top;
var logoLeft = $('#logo').offset().left;
var logoBottom = $('#logo').offset().top  + $('#logo').offset().height + $('#logo').offset().height/2;
var logoRight = $('#logo').offset().left + $('#logo').offset().width + $('#logo').offset().width/2;

var circle1Top = $('#circle1').offset().top;
var circle1Left = $('#circle1').offset().left;]
var circle1Bottom = $('#circle1').offset().top + $('#circle1').offset().height;
var circle1Right = $('#circle1').offset().left + $('#circle1').offset().width;

检测徽标底部和右侧的变量分别伴随$('#logo').offset().height/2和$('#logo').offset().width/2的原因是因为徽标的样式具有宽度和高度的一半的负边距以集中它。

if ( circle1Bottom >= logoTop && circle1Right >= logoLeft && circle1Top <= logoBottom && circle1Left <= logoRight ) {
// do things here
}

这是我一直在使用的测试人员。我经历了很多次，但在网上寻找可能的解决方案，但我没有取得任何成功。谁能告诉我我做错了什么？

JSFiddle：http://jsfiddle.net/s8cz10oj/

编辑：我可能错误地认识到碰撞是什么？我不知道。让我重新说一下，我的if语句是检查圈子是否触摸了徽标，无论是有点还是完全。但它似乎没有奏效。但是，当我使用固定值时，它可以工作，例如：

if ($(this).css("top") > "115px" && 
    $(this).css("top") < "415px" && 
    $(this).css("left") > "440px" && 
    $(this).css("left") < "740px")

jQuery - 碰撞检测

0 个答案: