我花了一天时间解决一个有趣的问题 - 我有一些 Canvas ，我想使用 native HTML5 拖放功能来拖动它们。一切都很好，除了我最终发现在 Chrome 28.0.1500.95 中，如果 Canvas 是内联 block div 的子元素，则 Canvas 的默认重影图像不会出现。查看这个最小的工作示例:
<html>
<body>
<div style='display:inline-block'>
<canvas id='canvas1' width='100px' height='100px' draggable='true'></canvas>
</div>
<div>
<canvas id='canvas2' width='100px' height='100px' draggable='true'></canvas>
</div>
<script type="text/JavaScript">
var canvas1, canvas2, context1, context2;
canvas1 = document.getElementById('canvas1');
context1 = canvas1.getContext('2d');
canvas2 = document.getElementById('canvas2');
context2 = canvas2.getContext('2d');
context1.fillText('no drag', 10, 30);
context2.fillText('yes drag', 10, 30);
</script>
</body>
</html>
当我尝试拖动“是拖动”而不是“不拖动”时出现重影图像。但是，如果我还坚持放置目标，尽管没有幽灵，我可以像往常一样通过在其上放置“无阻力”来触发它。我想了解为什么重影图像会根据父级的 CSS 明显消失，或者这里是否还有其他问题 - 提前致谢!
最佳答案
这可能只是 Chrome 中的一个错误(似乎在 Firefox 中有效，一旦你实际 .setData())
如果您只是在寻找一个简单但有些麻烦的解决方法:.setDragImage() 显式地基于 Canvas 。
function dragstart(e) {
var di = new Image();
di.src = this.toDataURL("image/png");
e.dataTransfer.setDragImage(di, 10, 10);
// Run in firefox
e.dataTransfer.setData("text/plain", this.id);
}
Fiddle (您可能想稍微调整一下图像的位置)。
关于javascript - 意外的 HTML5 拖放重影图像行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18603098/