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是错误的，您可以在找到哪个浏览器的行为错误后提交错误。 如果没有定义预期的行为并且实现对浏览器保持开放，则两个浏览器都是正确的。