All geek questions in one place

Unexpected HTML5 ghost image drag & drop behavior

I spent this day on a fun problem - I have some canvases that I would like to drag using my own HTML5 drag and drop features. Everything works fine, except in the end I found that in Chrome 28.0.1500.95, the default ghost image for the canvas is not displayed if the canvas is a child of the inline div block. Check out this minimal working example:

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

When you try to drag "yes and drag", a ghostly image appears, but not for "no drag." However, if I also adhere to the target, I can challenge it by dropping “no resistance” on it, as usual, despite the missing ghost. I would like to understand why the ghost image disappears, apparently, based on the CSS of the parent, or if something else happens here - thanks in advance!

+6
source share
1 answer

It might just be a bug in Chrome (it seems to work in Firefox as soon as you actually .setData() )

If you're just looking for an easy, albeit rather unpleasant, job: .setDragImage() explicitly canvas-based.

 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 (you can play a little with the position of the image).

0
source

Source: https://habr.com/ru/post/953100/

More articles:


All Articles