JS HTML5拖放：Chrome中的自定义停靠效果跳跃

Question

场景:我正在使用HTML5拖放功能在我编写的游戏中放置磁贴。我想添加一个效果，在我将要放置新磁贴的两个磁贴之间稍微分开一点，以表明这就是你要放置的位置(类似于Mac OS dock)。

我的方法：我有一个flexbox，我把这些瓷砖放进去。我写了一个函数，它基本上返回一个正弦波的一个周期，我用它来更新掉落的图块的右侧：和top：CSS属性（图块是位置：相对的;），基于它们在拖动期间相对于鼠标的原始位置。

  // 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（右）中：

我甚至控制台.logged元素的计算权：属性，当它在屏幕上显示跳跃时，它输出为常量值。

我尝试/思考的是：

< li >即使鼠标静止不动并且< code > console . log(event . clientx)输出一个常量值，单幅图块也会四处跳动。 < li >我认为< code>event.clientX可能在不知不觉中发生变化，所以我基于< code > math . trunc(event . clientx)进行计算，但没有结果。 < li >我在计算中使用的是< code > element . getboundingclientrect()，对此我不是很熟悉，我认为这可能是我的问题的根本原因。

我制作了这个CodePen，但无法完全复制这个问题。尽管如此，我认为有人可能能够发现正在发生的事情。

编辑：我已经把这个放在github页面上进行完全复制。这个链接可能不适合未来的问题读者，但我会在可预见的未来保持它。要演示这个问题，请在Chrome和Firefox中查看。

谢谢你。

Answer 1

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

相关问题:如何让子元素不干扰HTML5 dragover和drop事件？在子元素上拖动时引发父元素的“dragleave”

事情是这样的:-你开始拖动操作符-操作符在框上移动，现有的操作符很好地移动-你将操作符移动到一个现有的操作符上-这时浏览器进入一种无限循环的东西，因为每次元素移动，元素的位置都必须再次更新(因为新的事件被触发)

因为您需要现有操作符上的click事件，所以您不能只将它们设置为< code > pointer-events:none；就像在相关问题中一样，但是您可以在开始拖动时添加一个类，并在拖动时将这种样式应用于操作符。

另一个解决方案是使用库，在答案的评论中我发现库 https://bensmithett.github.io/dragster/，我使用可拖动的shopify。

更新

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

css prettyprint-override">: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>