意外的 HTML5 拖放重影图像行为答案

【问题标题】：Unexpected HTML5 drag & drop ghost image behaviour意外的 HTML5 拖放重影图像行为
【发布时间】：2013-09-03 23:32:19
【问题描述】：

我花了一天时间解决一个有趣的问题 - 我想使用原生 HTML5 拖放功能拖动一些画布。一切都很好，除了我最终发现在 Chrome 28.0.1500.95 中，如果画布是内联块 div 的子级，则不会出现画布的默认重影图像。查看这个最小的工作示例：

<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>

当我尝试拖动“yes drag”时会出现鬼影，但“no drag”则不会。但是，如果我还坚持一个放置目标，我可以通过按正常方式在其上放置“不拖动”来触发它，尽管没有幽灵。我想了解为什么重影图像会根据父级的 CSS 明显消失，或者这里是否还有其他原因 - 提前致谢！

【问题讨论】：

标签： javascript css html

【解决方案1】：

这可能只是 Chrome 中的一个错误（似乎可以在 Firefox 中工作，一旦你真的.setData()）

如果您只是在寻找一个简单但有点讨厌的解决方法：.setDragImage() 明确地，基于画布。

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（您可能想稍微调整一下图像的位置）。

【讨论】：

嗯好吧，解决方法确实有效，但从这个话题的普遍沉默来看，我猜这只是一个普通的老错误。谢谢！
告诉他们：crbug.com/new 可能发生的最坏情况是，他们将其关闭为无效，并告诉您为什么以及该怎么做。 ;)