3

大学の最終学年で音楽制作プロジェクトをやっています。私はそれにアプローチする方法について大まかな考えを持っていますが、正しい方向へのポイントが必要です。

図1

上の画像から、これが私がやろうと思った方法です。キャンバスは正方形に分割され、[FirstLine][FirstSquare] -> [FirstLine][SecondSquare] などを格納する JavaScript 2D 配列にマップされます。2 行目に達するまで、[SecondLine][FirstSquare] などのようになります。 .. 要点がわかります。私が抱えている問題は、HTML のドラッグ アンド ドロップ機能を使用して右側の DIV をグリッドの正方形にドラッグし、その配列インデックスを DIV の ID に置き換える方法です。それが可能かどうかさえわかりませんが、私は尋ねたいと思いました。それが不可能な場合は、別のアプローチをいただければ幸いです。

4

1 に答える 1

3

それは間違いなく可能であり、多くのコードも必要としません。'drop' イベント リスナーをキャンバスに追加します。イベント コールバック関数には、プロパティ 'clientX' および 'clientY' を含むパラメーター (イベント オブジェクト) があります。これらは、キャンバスの左上隅からのマウス カーソルの座標です。これらの座標を 10 (または選択したグリッド セル サイズ) で割ると、整数部分が 2 次元配列のインデックスに対応します。

また、残りのドラッグ アンド ドロップ コードを追加することを忘れないでください。詳細はこちら:

http://html5demos.com/drag (ソースを表示)

于 2012-10-29T21:25:59.280 に答える