Duplicating Element and Children Styling Using YUI3 - html

Question

So I've been cannibalizing this code from this YUI 3 Drag n' Drop tutorial, and it's been working great.
The one issue that I'm running into is that the example code only copies a few of the CSS styles (individually). This also doesn't include styling of any children elements that may be present.
Y.DD.DDM.on('drag:start', function(e) {
var drag = e.target;
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
drag.get('dragNode').setStyles({
opacity: '.5',
borderColor: drag.get('node').getStyle('borderColor'),
backgroundColor: drag.get('node').getStyle('backgroundColor')
});
});
So when the drag starts, we create a dragNode and set its HTML based on the item being dragged. After the dragNode HTML is set, we then set the styles using .setStyles() which seems to accept an object.
Is there a more effective way of creating this dragNode so that it not only gets the correct HTML, but also gets all the styles of the element and its children?
I know I could use .one() or .all() to get to the children elements and manually copy over each style that is set, but I feel like there has to be a way of doing that without all the manual style copying.

Answer 1

You could look at using the DOM cloneNode(true) method to clone the whole thing, which should pull over any applied styles too. One warning with this method (and probably the existing copy of HTML) is that IDs will be duplicated. It's probably ok in the case of populating the Drag Node, which you can't interact with much.
Another possibility which I've not investigated beyond a little googling is to use html2canvas to create an image to drag. I've no idea whether that approach will be performant or accurate enough though.

Answer 2

What I ended up finding out was that I was missing a top-level class (which applied the styling to its children elements).
The fix was surprisingly easy in my case, since I had to only add a single class based on if the element had a specific class or not.
Y.DD.DDM.on('drag:start', function(e) {
var drag = e.target;
drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
if( drag.get('node').hasClass('policy') ) {
drag.get('dragNode').addClass('policy');
} else {
drag.get('dragNode').addClass('lead');
}
drag.get('dragNode').setStyles({
opacity: '.5',
borderColor: drag.get('node').getStyle('borderColor'),
backgroundColor: drag.get('node').getStyle('backgroundColor')
});
});