kutlugsahin / smooth-dnd

drag and drop library for javascript
MIT License
598 stars 146 forks source link

Add support for Canvas on ghost of dragging #63

Open cbazza opened 4 years ago

cbazza commented 4 years ago

Basically when dragging something that has canvas inside, the ghost clone has blank canvas; it would be great if you could copy the previous canvas into the cloned one so that the ghost works properly, hide this new functionality behind a flag.

https://github.com/kutlugsahin/smooth-dnd/blob/master/src/mediator.ts

line 88:   const ghost: HTMLElement = wrapperElement.cloneNode(true) as HTMLElement; 

The problem is that cloneNode doesn't copy content of canvas so cloned canvas is blank so need to do something like this following line 88.

if (copyFullCanvas) {
        let elements = ghost.querySelectorAll("canvas");
        if (elements.length) {
            let sourceCanvas = wrapperElement.querySelectorAll("canvas");
            elements.forEach((canvas, idx)=>{
                let destCtx = canvas.getContext('2d');
                destCtx.drawImage(sourceCanvas[idx], 0, 0);
            });
        }
}