HTML5從DIV拖放到畫布

Question

我在大學爲我的最後一年製作音樂創作項目。我對如何解決這個問題有一個粗略的想法，但我只需要一個正確的方向。

從上面的圖片，這是我怎麼想這樣做的。畫布被分成正方形，並映射到存儲[FirstLine] [FirstSquare] - > [FirstLine] [SecondSquare]等的JavaScript 2D數組。直到它到達第二行，然後看起來像[SecondLine] [FirstSquare]等。 ..你明白了。我遇到的問題是如何使用HTML拖放功能將右側的DIV拖到網格中，並用DIV的ID替換該數組索引。我甚至不確定是否有可能，但認爲我會問。如果這是不可能的，那麼另一個apporach將不勝感激。

Answer 1

這是絕對有可能的，也不需要太多的代碼。將'drop'事件偵聽器添加到您的畫布上。事件回調函數將有一個參數，一個事件對象，它包含屬性'clientX'和'clientY'。這些是畫布左上角的鼠標光標的座標。將這些座標除以10（或您選擇的任何網格單元大小），整數部分將對應於2d數組中的索引。

此外，不要忘記添加拖放代碼的其餘部分。更多的信息在這裏：

http://html5demos.com/drag（查看源代碼）