javascript - 碰撞检测: Why is other object's offset so large?

Question

我试图在拖动时循环遍历每个 div，并根据它们的偏移量计算它们是否相交。可拖动 div 的偏移量计算正确，但其他 div 注册为一个疯狂的大数字(100,000)。我究竟做错了什么？

$(function() {
$(".table").draggable({
  drag: function(ev, ui)
  {
    var offset = $(this).offset();
    $(this).attr("id", "currentDrag");
    $(".table").not("#currentDrag").each(function() {
      var otherOffset = $(this).offset();
      if(offset.left + 100 > otherOffset.left)
      {
        console.log("collision");
        console.log("drag Offset: " + offset.left);
        console.log("other Offset: " + otherOffset.left + 100);
      }
    });
  }
});
});

http://jsbin.com/coxemuqogo/edit?js,console,output

Answer 1

请注意所有大数字都以 100 结尾。这是因为当您将数字添加到字符串时，数字会转换为字符串。按照从左到右的操作顺序，您将得到:

'other Offset: ' + 11 + 22 = 'other Offset: 1122'

因为 11 被添加到字符串中，所以 22 被添加到包含“11”的字符串中。

你想要的是这样的:

'other Offset: ' + (otherOffset.left + 100)

这意味着数字在添加到字符串之前会先相加。