javascript - JS HTML5 拖放 : Custom Dock Effect Jumping Around in Chrome

Question

情况:我正在使用 HTML5 拖放功能在我正在编写的游戏中放置图 block 。我想添加一种效果，让我要放置新 block 的两个 block 稍微分开，以指示这是您放置的位置(类似于 Mac OS 停靠栏)。

我的方法:我有一个 flexbox，我要将这些图 block 放入其中。我写了一个函数，基本上返回正弦波的一个周期，我用它来更新掉落的方 block 的 right: 和 top: CSS 属性(方 block 是position: relative;) 基于它们在拖动期间相对于鼠标的原始位置。

  // 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()，对此我不是很熟悉，我认为这可能是我的问题的根本原因。

我做了 this CodePen ，但无法完全重现该问题。不过，我认为有人可能能够发现正在发生的事情。

编辑:我把它放在 github page to fully replicate 上了.此链接可能不适用于该问题的 future 读者，但我会在可预见的将来继续使用。要演示该问题，请在 Chrome 和 Firefox 中查看。

谢谢。

Answer 1

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

相关问题:How to keep child elements from interfering with HTML5 dragover and drop events? 'dragleave' of parent element fires when dragging over children elements

事情是这样的:- 你开始拖动运算符(operator)- 运算符(operator)在盒子上移动，现有运算符(operator)移动得很好- 您将运营商移至现有运营商之一- 此时浏览器进入了一种无限循环，因为每次元素移动时，元素的位置都必须再次更新(因为触发了新事件)

由于您需要现有运算符的点击事件，您不能像相关问题中那样将它们设置为 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 是错误的，您可以在发现哪个浏览器的行为错误后提交错误。如果未定义预期行为并且实现对浏览器开放，那么两种浏览器都是正确的。