意外的HTML5拖放鬼影像行為

Question

我花了一天時間討論一個有趣的問題 - 我有一些畫布，我想使用原生的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消失，或者如果這里還有其他東西 - 提前感謝！

Answer 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);
}

小提琴（你可能想稍微擺弄一下圖像的位置）。

意外的HTML5拖放鬼影像行為

問題描述

1 個解決方案

解決方案1
0 已采納 2013-09-04 02:38:52

意外的HTML5拖放鬼影像行為

問題描述

1 個解決方案

解決方案1 0 已采納 2013-09-04 02:38:52

解決方案1
0 已采納 2013-09-04 02:38:52