状況: HTML5 のドラッグ アンド ドロップを使用して、作成中のゲームにタイルを配置しています。新しいタイルをドロップしようとしている 2 つのタイルが少し離れて移動し、これがドロップ先であることを示す効果を追加したいと思います (Mac OS ドックと同様)。
私のアプローチ:flexboxこれらのタイルをドロップする があります。基本的に正弦波の 1 周期を返す関数を作成し、それを使用して、ドロップされたタイル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 で表示します。
ありがとうございました。