问题
I have a canvas element which has animations within it that are facilitated by EaselJS. The canvas element has a parent div wrapping it with draggable set to true.
<div class="outer-parent" draggable="true">
<div class="inner-parent">
<canvas></canvas>
</div>
</div>
The draggable event is working (I originally had issues with this, but the problem was resolved here: EaselJs canvas dragstart event not bubbling to parent), however the canvas element does not appear to show a "ghost". If I add a border to outer-parent I can see the draggable moving, but within the border there is nothing - it's 100% transparent.
I checked to see whether this was an issue specific to canvas and not easeljs - it appears to be an easeljs issue as the ghost works fine in this example: http://codepen.io/anon/pen/BNVNpr.
Here is an example of it not working with easeljs and movieclipjs http://codepen.io/anon/pen/xGzwYY http://codepen.io/anon/pen/yNEOwB (running this script exported from flash)
What could be causing the ghost not to show, and how can I get it to show?
回答1:
It looks as though this is a browser behaviour in Chrome. All of your examples work as expected in Safari, however, in Chrome there seems to be a maximum canvas size before it "drops" the canvas content in the ghost. For example, for me a 200x300 canvas works.
http://codepen.io/anon/pen/pJKNEq
I'm not sure how you'd work around this, since it seems to be a limitation of the browser. Scaling it up works, but is probably not ideal.
http://codepen.io/anon/pen/yNEVaZ
来源：https://stackoverflow.com/questions/31382935/easeljs-movieclip-canvas-draggable-true-does-not-show-ghost-image