Monday, 19 August 2013

How are default HTML5 drag 'ghost' icons determined? (Why are mine tiny/not visible?)

How are default HTML5 drag 'ghost' icons determined? (Why are mine
tiny/not visible?)

Sometimes the default 'ghost' HTML5 drag image is smaller in size or not
rendered at all. It varies by browser and there seems to be an interaction
with Dojo Dijits involved.
After adding a Dijit Button to a draggable Dijit ContentPane, what causes
the drag icon to be tiny in FireFox and not rendered at all in Chrome?
Simple jsFiddle repro:
var cp1 = new ContentPane({
style: "width: 400px; height: 124px; background:red",
content: "cp1: 'ghost 'drag icon is tiny or not visible :(<br />",
});
// Make draggable
domProp.set(cp1.domNode, 'draggable', 'true');
cp1.on('dragstart', onDragStartHandler); // otherwise FF doesn't show drag
icon
// PROBLEM -> adding button messes up drag icon
button = new Button({label: 'Dijit Button'});
button.placeAt(cp1.containerNode);

No comments:

Post a Comment