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（查看源代码）