問題タブ [html5-draggable]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

78 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
1 に答える
782 参照

javascript - JS HTML5 ドラッグ アンド ドロップ: カスタム ドック効果が Chrome で飛び回る

状況: HTML5 のドラッグ アンド ドロップを使用して、作成中のゲームにタイルを配置しています。新しいタイルをドロップしようとしている 2 つのタイルが少し離れて移動し、これがドロップ先であることを示す効果を追加したいと思います (Mac OS ドックと同様)。

私のアプローチ:flexboxこれらのタイルをドロップする があります。基本的に正弦波の 1 周期を返す関数を作成し、それを使用して、ドロップされたタイルright:とtop:CSS プロパティ (タイルはposition: relative;) をマウスに対する元の位置に基づいて更新していますdrag。

問題: Chrome (Firefox ではなく) で、パターンが見つからないマウスの位置で、タイルが前後にジャンプします。以下の .gif を参照してください。

Chrome (左) と Firefox (右) の場合:

Chrome でのデモ Firefox でのデモ

console.log要素の計算されたプロパティもright:取得しました。画面上でジャンプしている間、定数値として出力されます。

私が試したこと/考えたこと：

  • マウスが静止してconsole.log(event.clientX)いて一定の値を出力していても、タイルは飛び跳ねます。
  • event.clientXいつの間にか変化しているのではないかと思ったのでMath.trunc(event.clientX)、無駄に計算しています。
  • 私はelement.getBoundingClientRect()あまりよく知らない計算で使用していますが、それが問題の根本原因である可能性があると思います。

この CodePenを作成しましたが、問題を完全に再現することはできませんでした。それでも、誰かが何が起こっているのかを見つけることができると思います。

編集:完全に複製するために、これを github ページに掲載しました。このリンクは、質問の将来の読者には機能しない可能性がありますが、当面は維持します。この問題を実証するには、Chrome と Firefox で表示します。

ありがとうございました。


12345678910