角滑塊碰撞閃爍

我創建了一個角度多滑塊指令，現在我正在向它添加功能。我期望實現的一個功能是碰撞檢測，當滑過另一個滑塊時，一個滑塊的氣泡將浮在另一個之上。這裏有一個完整的代碼示例的調度器。 http://plnkr.co/edit/eg365UgK7ZNW1GZaTltQ?p=preview 角滑塊碰撞閃爍

看的代碼是行224在multislider.js

//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 : ''}); 
    }

要重新剛過綠色滑動紅色手柄，將看到紅色的泡沫和處理，並且泡不徘徊，但閃爍上和下。它應該保持不閃爍，然後在完全移動後通過綠色手柄恢復正常高度。

爲什麼它閃爍？我錯過了什麼來防止這種情況發生。

這裏是我的github回購，如果你想看看，並提交PR有：https://github.com/enkodellc/angular-multi-slider

來源

2015-11-09 Enkode

它是閃爍的，因爲一旦彈出窗口被取消，下一次你移動它，它就不會相互碰撞，所以它會掉下來。你再次移動它，它會發生碰撞，它會向上移動，然後它不會再發生碰撞......等等:) – sirrocco

Sirrocco，將其作爲答案。所以我可以給你信用。 – Enkode

不要擔心，請添加代碼修復程序並標記它。祝你有個好的一天！ – sirrocco

由於@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 : ''}); 
     } 
    }

來源

2015-11-09 11:36:05 Enkode

角滑塊碰撞閃爍

回答

相關問題