Opened 15 years ago

Closed 13 years ago

#351 closed enhancement (fixed)

DnD: Make it easy to create arbitrary DOM node when dragging

Reported by: [email protected] Owned by: Eugene Lazutkin
Priority: high Milestone: 0.9
Component: DnD Version: 0.2
Keywords: DnD drag and drop Cc:
Blocked By: Blocking:


Please enhance dojo.dnd.HtmlDragObject? so that the method onDragStart() calls another method (that can be overriden) to create the dragClone.

This change will make it easy to create a custom 'ghost' node for dragging.


onDragStart: function(e){

...blah... this.dragClone = this.createClone(e); ...blah...


createClone: function(e){

return this.domNode.cloneNode(true);


Change History (6)

comment:1 Changed 15 years ago by alex

Milestone: 0.3release
Owner: changed from anonymous to alex
Status: newassigned

comment:2 Changed 15 years ago by [email protected]

I've realised that the change mentioned above isn't enough to make creating an arbitrary 'ghost' node easy. The problem is that HtmlDragSource? creates the HtmlDragObject?, so (I think) the only way to get a new subclass of HtmlDragObject? to be used is to subclass HtmlDragSoruce? as well. Seems quite complicated :-(

How about this:

HtmlDragSource? represents where a drag starts it also knows how to turn itself into a 'ghost' node (which by default is a deep clone).

HtmlDragObject? represents the 'ghost' node and is responsible for that node's dragging behaviour. It would need to know the DOM node to use as the 'ghost' and the DOM node/HTMLDragSource that created it (so that, for example, the HtmlDropTarget? can insert the source domNode rather than inserting the ghost node).

I'm not familiar enough the the DnD lifecycle to suggest exactly the best way to do this... but the idea is that, as a user, I can simply subclass the HtmlDragSource?.

Another possibility, which seems a lot simpler because it avoids the need for subclasses, is that I could define a function that creates the ghost and attach the function to the HtmlDragSource?.

var dragSource1 = new dojo.dnd.HtmlDragSource(myNode1, "type");
dragSource.ghostCreator = shallowClone;

var dragSource2 = new dojo.dnd.HtmlDragSource(myNode2, "type");
dragSource.ghostCreator = cloneWithShadow;

function shallowClone(domNode) {
    return domNode.cloneNode(false);

function cloneWithShadow(domNode) {
    // creates a container 'div' slightly bigger than domNode
    // create a child that's a clone of domNode & position at top left
    // create a child that's a black-filled div & position at bottom right
    // return

Hope these suggestions are useful...

comment:3 Changed 14 years ago by sjmiles

Milestone: 0.3release0.4

DnD needs major refactoring. Moving to 0.4.

comment:4 Changed 14 years ago by dylan

Milestone: 0.40.5

comment:5 Changed 13 years ago by Adam Peller

Component: GeneralDnD
Owner: changed from alex to Eugene Lazutkin
Status: assignednew

Eugene, another old DnD ticket to validate

comment:6 Changed 13 years ago by Eugene Lazutkin

Resolution: fixed
Status: newclosed

Fixed in 0.9.

Note: See TracTickets for help on using tickets.