【发布时间】：2011-06-03 17:49:53
【问题描述】：
我试图弄清楚如何将图像从一个画布拖放到另一个画布。假设画布彼此相邻，是否可以无缝地将某些东西拖过边界？如果不是，将 div 拖到画布上，获取其 ID，然后通过响应画布上的 mouseup 位置来放置它是不是更好？
【问题讨论】：
标签： html drag-and-drop canvas
【发布时间】：2011-06-03 17:49:53
【问题描述】：
您不会在画布上拖动项目。画布是一种非保留模式（或immediate mode）图形API。您发出绘图命令并获得像素。模拟拖动包括跟踪用户的鼠标移动，并选择反复清除并使用不同参数重新绘制画布，以使某些像素子集看起来像一个有凝聚力的对象一样移动。
将其与 HTML 或 SVG 进行对比，您可以在其中实际更改真实 DOM 对象的位置/转换属性，并且随着文档的可视化表示自动更新，手表会自动更新。
如果你有两个画布并且想要从一个画布拖动到另一个画布，我会做的是：
- 将鼠标放在“菜单”画布上，以编程方式创建一个与对象一样大的新画布，并（使用绝对 CSS 定位）将其放置在用户单击的项目的顶部。
- 将该项目绘制到该画布上。
- 跟踪文档上的
mousemove事件，并更新画布相对于鼠标的位置。 - 当用户在目标画布上释放鼠标时，扔掉（或隐藏）您的“拖动”小画布，并在适当位置使用拖动的项目重新绘制主画布。
不过，我在这里可能真正要做的是使用 SVG。 ;)
【讨论】：
检查this 答案。 它用于多选拖放，但可能会有用。
【讨论】：
为什么这需要 2 个画布？画布是您的绘图区域，您可以控制它。为什么需要 2 个？
【讨论】：
-
基本上将缩略图从菜单拖到画布上。即在画布上添加一些东西。
-
我明白你在说什么 - 我可以让菜单成为画布本身的一部分。