6

私は 1 日を面白い問題に費やしました。ネイティブの 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 に基づいてゴースト画像が明らかに消える理由、またはここで何か他のことが起こっているかどうかを理解したいと思います-事前に感謝します!

4

1 に答える 1

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

フィドル(画像の位置を少しいじる必要があるかもしれません)。

于 2013-09-04T02:38:52.263 に答える