Question

我创建了一个角度多滑块指令，现在我正在为它添加功能。我希望实现的一个功能是碰撞检测，一个滑块气泡在彼此滑过时会漂浮在另一个上方。这是一个带有完整代码示例的plunker。 http://plnkr.co/edit/eg365UgK7ZNW1GZaTltQ?p=preview

要查看的代码位于multislider.js

的第224行

    //This is my code for adjusting a slider
    var delta = 25;
    var baseTop = -36;
    if (overlaps(bubbles[currentRef][0], bubbles[currentRef + 1][0])) {
      handles[currentRef].css({ top : pixelize(baseTop), height : pixelize(baseHeight + delta) });
      bubbles[currentRef].css({ top : pixelize(baseTop - delta)});
    } else {
      handles[currentRef].css({ top : '', height : ''});
      bubbles[currentRef].css({ top : ''});
    }

要重新创建，只需将红色手柄滑过绿色，就会看到红色气泡和手柄，气泡确实悬停，但上下闪烁。它应该保持向上而不是闪烁，然后在完全移动通过绿色手柄后恢复正常高度。

为什么会闪烁？为了防止这种情况发生，我缺少什么。

如果您想看一下并在那里提交PR，这是我的github回购：https://github.com/enkodellc/angular-multi-slider

Answer 1

正如@sirrocco所解释的那样：

这是闪烁的，因为一旦弹出窗口被取消，那么下次你移动它，它不会碰撞所以它会下降。它再次移动它，它碰撞，它向上移动然后它不会再碰撞......等等在：）

我更新了plunker中的代码以添加基本检查。现在我需要使用（n）滑块。

    //This is my code for adjusting a slider
    var delta = 25;
    var baseTop = -36;
    if (overlaps(bubbles[currentRef][0], bubbles[currentRef + 1][0])) {
      handles[currentRef].css({ top : pixelize(baseTop), height : pixelize(baseHeight + delta) });
      bubbles[currentRef].css({ top : pixelize(baseTop - delta)});
    } else {
      if (bubbles[currentRef][0].offsetLeft > (bubbles[currentRef+1][0].offsetLeft + bubbles[currentRef+1][0].offsetWidth)
          || ((bubbles[currentRef][0].offsetLeft + bubbles[currentRef][0].offsetWidth) < bubbles[currentRef+1][0].offsetLeft)) {
        handles[currentRef].css({ top : '', height : ''});
        bubbles[currentRef].css({ top : ''});
      }
    }

角度滑块碰撞闪烁

1 个答案: