JS HTML5拖放：自定義Dock效果在Chrome中跳躍

Question

情況：我正在使用HTML5拖放將瓷磚放在我正在編寫的游戲中。 我想添加一個效果，其中兩個瓷磚，我即將放置一個新的瓷磚之間稍微移動，以表明這是你正在下降的地方（類似於Mac OS底座）。

我的方法：我有一個flexbox ，我正在丟棄這些瓷磚。 我寫了一個函數，基本上返回一個正弦波周期，我用它來更新掉落的瓷磚right: top: CSS屬性（瓷磚是position: relative; ）基於它們相對於鼠標的原始位置在drag期間。

  // Update occupant style for desired effect
  occupants.forEach(function(occupant, index) {
    $(occupant).css({'right' : -10 * nudgeSine(occupantsMouseOffset[index] * 10) + 'px',
                     'top' : -10 * Math.abs(nudgeSine(occupantsMouseOffset[index] * 10)) + 'px',
                     'opacity' : 1 - Math.abs(nudgeSine(occupantsMouseOffset[index])) });
  });

  // Function to return 1 period of a sine wave
  function nudgeSine(x) {
    if (x < -3.14159 || x > 3.14159) {
      return 0;
    } else {
      return Math.sin(x);
    }
  }

問題：在Chrome中（但不是在Firefox中），在某些鼠標位置（我無法找到圖案）中，圖塊會來回跳躍。 請參閱下面的.gif文件：

在Chrome（左）和Firefox（右）中：

我甚至是console.log ged元素的計算right:屬性，當它顯示在屏幕上跳躍時，它輸出為常量值。

我試過/想過的：

• 即使鼠標靜止並且console.log(event.clientX)輸出一個常量值，瓷磚也會跳轉。
• 我認為event.clientX可能會在不知不覺中發生變化，所以我的計算基於Math.trunc(event.clientX)無濟於事。
• 我在我的計算中使用了element.getBoundingClientRect() ，我不是很熟悉，我認為這可能是我問題的根本原因。

我制作了這個CodePen ，但無法完全復制該問題。 不過，我認為有人可能能夠發現正在發生的事情。

編輯：我把它放在github頁面上完全復制 。 這個鏈接可能對問題的未來讀者不起作用，但我會在可預見的將來繼續保持這種聯系。 要演示此問題，請在Chrome和Firefox中查看。

謝謝。

Answer 1

也許我可以稍后擴展我的答案，但現在：

相關問題： 如何防止子元素干擾HTML5 dragover和drop事件？ 拖動子元素時，父元素的'dragleave'會觸發

這就是： - 你開始拖動操作符 - 操作符移動到框上，現有的操作符很好地移動 - 你將操作符移動到現有的一個操作符上 - 此時瀏覽器進入一種無限循環的東西，因為每個元素移動的時間必須再次更新元素的位置（因為觸發了新事件）

由於您需要現有運算符上的click事件，因此您不能將它們設置為pointer-events: none; 就像在相關問題中一樣，但是您可以在開始拖動時添加一個類，並在拖動時將此樣式應用於運算符。

另一個解決方案是使用一個庫，在答案的評論中我找到了庫https://bensmithett.github.io/dragster/ ，我使用了shopify的draggable。

更新

我無法找到這種行為的確切術語，也許我們可以選擇“循環案例”或“未定義行為”。 看看我的例子：

 :root { /*colors by clrs.cc*/ --navy: #001f3f; --blue: #0074D9; --red: #FF4136; font-family: sans-serif; } .animated { transition: all .5s; } h2 { color: var(--red); } div { height: 160px; width: 160px; padding: 20px; background: var(--blue); margin-bottom: 20px; } .box1 { border-right: 20px solid var(--navy); } .box1:hover { border-right: 0px solid var(--navy); } .box2:hover { border-radius: 100px; } 

 <div class="box1 animated">hover your mouse over my border on the right →</div> <div class="box2 animated">hover your mouse over an edge of this box</div> <h2>Warning, the following boxes have no animations, flashes are expected:</h2> <div class="box1">hover your mouse over my border on the right →</div> <div class="box2">hover your mouse over an edge of this box</div> 

當用戶將鼠標移動到邊框上時，循環中會發生以下情況：

1. box1正在盤旋
2. 懸停樣式適用，邊框被刪除
3. box1沒有被盤旋
4. 懸停樣式停止應用，邊框被讀取

基本上目前CSS沒有真正評估，因為一旦評估評估是無效的。 這正是您的示例中發生的情況。 我不知道CSS標准是否有定義瀏覽器應該如何處理它的規則。 如果定義了預期的行為，則FF或Chrome是錯誤的，您可以在找到哪個瀏覽器的行為錯誤后提交錯誤。 如果沒有定義預期的行為並且實現對瀏覽器保持開放，則兩個瀏覽器都是正確的。