拖放到 HTML5 画布答案

【问题标题】：Drag and Drop to HTML5 Canvas拖放到 HTML5 画布
【发布时间】：2013-10-05 21:55:17
【问题描述】：

我正在拖动一个 html 元素并拖放到画布上，获取释放的位置并将对象绘制在画布上的相同位置。但显示在不同的位置。见我的code。

脚本

function init() {
    var canvas = document.getElementById("graphCanvas");
    var context = canvas.getContext("2d");

    context.lineWidth = 2;
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), 
        ev.clientX, ev.clientY);
}

HTML

<body onload="init();">
    <canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=300 width=300 style="border:1px solid #000000;"></canvas>
    <img id="img1" src="http://static.tumblr.com/vcbmwcj/foumiteqs/arrow_up_alt1.svg" draggable="true" ondragstart="drag(event)"/>
</body>

【问题讨论】：

标签： javascript html canvas drag-and-drop html5-canvas

【解决方案1】：

已修复。更新代码为http://jsfiddle.net/YXxsH/5/。使用pageX 和pageY 以及图像offset 值完成计算。

【讨论】：

对不起，别管它没有使用的变量。问题仍未解决
问题里已经说清楚了，丢一个地方渲染另一个地方。
很好。但问题仍然存在。尝试增加画布宽度或高度并再次下降（增加至显示的滚动条）。
@ViliusL 让放置的元素在画布内移动容易吗？那么用户可以在它们掉落后重新定位它们吗？
@sjs 你必须保存或知道元素位置，捕捉用户拖动，以便你知道 x 和 y 坐标的变化，清除画布，如果需要，绘制画布背景，用新位置重绘想要的元素。