HTML5 从 DIV 拖放到 Canvas答案

【问题标题】：HTML5 Drag and Drop from DIV to CanvasHTML5 从 DIV 拖放到 Canvas
【发布时间】：2012-10-19 03:16:26
【问题描述】：

我正在为我在大学的最后一年做一个音乐创作项目。我对如何处理它有一个粗略的想法，但我只需要指出正确的方向。

从上面的图片来看，这就是我的想法。画布被分成正方形并映射到一个 JavaScript 二维数组，存储 [FirstLine][FirstSquare] -> [FirstLine][SecondSquare] 等。直到它到达第二行，然后看起来像 [SecondLine][FirstSquare] 等。 ..你明白了。我遇到的问题是如何使用 HTML 拖放功能将右侧的 DIV 拖入方格中，并将该数组索引替换为 DIV 的 ID。我什至不确定这是否可能，但我想我会问。如果这是不可能的，那么另一个方法将不胜感激。

【问题讨论】：

标签： javascript html canvas multidimensional-array drag-and-drop

【解决方案1】：

这绝对是可能的，也不需要太多代码。将“drop”事件侦听器添加到画布。事件回调函数将有一个参数，一个事件对象，其中包含属性“clientX”和“clientY”。这些是画布左上角鼠标光标的坐标。将这些坐标除以 10（或您选择的任何网格单元大小），整数部分将对应于 2d 数组中的索引。

另外，不要忘记添加其余的拖放代码。更多信息在这里：

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

【讨论】：