意外的HTML5拖放鬼影像行为

Question

意外的HTML5拖放鬼影像行为

我花了一天时间讨论一个有趣的问题 - 我有一些画布,我想使用原生的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>

Run Code Online (Sandbox Code Playgroud)

当我尝试拖动"是拖动"时会出现重影图像,但不会显示"无拖动".但是,如果我也坚持放下目标,我可以通过按照正常情况放下"无拖拽"来触发它,尽管没有幽灵.我想知道为什么幽灵图像显然会根据父母的CSS消失,或者如果这里还有其他东西 - 提前感谢!

Answer 1

nma*_*ier 0

这可能只是 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);
}

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	12 年，2 月前
查看次数：	2150 次
最近记录：	12 年，2 月前