意外的HTML5拖动&丢弃重影图像行为

Unexpected HTML5 drag & drop ghost image behaviour

本文关键字：重影 图像 HTML5 拖动 amp 意外      更新时间：2023-09-26

我花了一天的时间来解决一个有趣的问题——我有一些画布，我想使用本地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>

当我尝试拖动"是拖动"时，会出现重影图像，但不适用于"不拖动"。然而，如果我也坚持在一个降落目标上，我可以像正常情况下"不拖动"它来触发它，尽管没有鬼魂。我想知道为什么重影图像显然是基于父级的CSS而消失的，或者这里是否发生了其他事情——提前感谢！

这可能只是Chrome中的一个错误（一旦你真正.setData()，它似乎在Firefox中有效）

如果你只是在寻找一个简单但有点讨厌的解决方案：基于画布的显式.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);
}

摆弄（您可能想稍微摆弄一下图像的位置）。

相关文章：