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了元素的计算right:属性,当它显示在屏幕上跳跃时,它输出为常量值.

我试过/想过的:

• 即使鼠标静止并console.log(event.clientX)输出恒定值,瓷砖也会跳转.
• 我认为event.clientX可能会在不知不觉中发生变化,所以我的计算基础Math.trunc(event.clientX)无济于事.
• 我element.getBoundingClientRect()在我的计算中使用,我不是很熟悉,我认为这可能是我问题的根本原因.

我制作了这个CodePen,但无法完全复制该问题.不过,我认为有人可能能够发现正在发生的事情.

编辑:我把它放在github页面上完全复制.这个链接可能对问题的未来读者不起作用,但我会在可预见的将来继续保持这种联系.要演示此问题,请在Chrome和Firefox中查看.

谢谢.

Answer 1

也许我可以稍后扩展我的答案，但现在：

\n\n

相关问题：如何让子元素不干扰HTML5的dragover和drop事件？\n拖动子元素时会触发父元素的“dragleave”

\n\n

发生的情况如下：\n- 您开始拖动操作符\n- 操作符在框上移动，现有操作符很好地移动\n- 您将操作符移动到现有操作符之一上\n- 此时浏览器输入一种无限循环的东西，因为每次元素移动元素的位置都必须再次更新（因为触发新事件）

\n\n

由于您需要现有操作符上的单击事件，因此您不能只将它们设置pointer-events: none;为相关问题中的样式，而是可以在开始拖动时添加一个类，并在拖动时将此样式应用于操作符。

\n\n

另一个解决方案是使用库，在答案的评论中我找到了库https://bensmithett.github.io/dragster/，我使用shopify的draggable。

\n\n

更新

\n\n

我无法找到这种行为的确切术语，也许我们可以使用“循环情况”或“未定义的行为”。看我的例子：

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

当用户将鼠标移动到边框上时，循环中会发生以下情况：

\n\n

\n
1. box1正在悬停
\n
2. 应用悬停样式，边框被删除
\n
3. box1没有被悬停
\n
4. 悬停样式停止应用，边框被读取
\n

\n\n

基本上目前 CSS 并没有真正评估，因为一旦评估，评估就无效了。这正是您的示例中发生的情况。我不知道 CSS 标准是否有定义浏览器应如何处理此问题的规则。如果定义了预期的行为，则 FF 或 Chrome 是错误的，您可以在找出哪个浏览器的行为错误后提交错误。如果没有定义预期的行为并且实现对浏览器开放，那么两种浏览器都是正确的。

\n