jquery与碰撞的位置.检测到碰撞时添加类

Question

我正在使用带有碰撞的jquery-ui自动完成框来显示输入上方或下方的自动完成.我想要的是在检测到碰撞的情况下向自动完成元素添加一个类,这样如果它高于vs低于以下我可以自定义css.这看起来应该很简单,但我似乎无法找到任何方法来实现它.

Answer 1

更好的解决方案是在回调中使用第二个参数.来自jQueryUi文档:

第二个提供关于两个元素的位置和尺寸的反馈,以及对它们的相对位置的计算.target和element都具有以下属性:element,left,top,width,height.此外,有水平,垂直和重要,给你十二个潜在的方向,如{水平:"中心",垂直:"左",重要:"水平"}.

如上所述,第二个参数中有一个水平和一个垂直属性,您可以使用它来查明元素是否被翻转.所以你可以这样写:

$("#someId").dialog({
      position: {
      my: 'left top',
      at: 'right top',
      collision: 'flip flip',
      of: $('#' + someElementID),
      using: function (obj,info) {
          if (info.vertical != "top") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          if (info.horizontal != "left") {
              $(this).addClass("flipped");
          } else {
              $(this).removeClass("flipped");
          }
          $(this).css({
            left: obj.left + 'px',
            top: obj.top + 'px'
          });
      }
},