On Jul 28, 5:06 pm, ferion <fer...@gmx.de> wrote:
> Hello everybody,
> another day - another problem :)
> Due to the design of my project it is nessesary to manipulate the DOM-
> Structure of the ghost created by the new Draggable function
> "ghosting:true"
> like in
> this.Dragger = new Draggable($(this.widgetToolId),{revert:
> this.shallIToolRevert.bind(this), onStart:this.startDrag.bind(this),
> onEnd:this.stopDrag.bind(this), onDrag:this.whileDrag.bind(this),
> ghosting:true, starteffect:null});
> The ghosting works fine, but it seems to be a perfect Clone of the
> original Div (including the ID which is quite strange because the
> shall be no ambigious id in one page).
> I worked some time on this Problem but every manipulation ($
> (dragname), Dragger.element) targets the original div an not the
> clone.
startDrag uses Node.cloneNode, which does not know anything about 'id'
properties or their uniqueness.

I think that HTMLElement ought to have its own.cloneNode method,
overriding Node.cloneNode and unsetting the 'id' property, because
otherwise it *usually* generates invalid HTML; but unfortunately there
is no override. (I would say this is a bug in the DOM Level 2 HTML
spec, but I guess you can argue that the element is not invalid, just
inserting it in the same document is invalid - and again you do that
by methods of Node not of HTMLElement.)

Given this, I would say it is a bug in startDrag that it inserts a
probably illegal element .

I can't think of a way round this in your code, but you could hack
dragdrop.js thus (untested)

 startDrag: function(event) {
    this.dragging = true;
      this.delta = this.currentDelta();

    if(this.options.zindex) {
      this.originalZ = parseInt(Element.getStyle(this.element,'z-
index') || 0);
      this.element.style.zIndex = this.options.zindex;

    if(this.options.ghosting) {
      this._clone = this.element.cloneNode(true);
// Add this line:
      this._clone.id = this.element.id + '_ghost';
// or this one:
      this.element._originallyAbsolute = (this.element.getStyle
('position') == 'absolute');
      if (!this.element._originallyAbsolute)
      this.element.parentNode.insertBefore(this._clone, this.element);


Then if you use the first method, you can use $(this.widgetToolId
+'_ghost') to refer to the ghost. In the second case, use $$('.ghost')

Further thoughts on cloneNode etc (not directly relevant to the

An Element.cloneNode (overriding Node.cloneNode) could remove the id:
this would always be legal, and very often necessary for legality - it
is unlikely that you will clone a node but not insert it in the
document. A more helpful alternative would be to let Element.cloneNode
to take an optional 'id' argument, which it would substitute for the
original id in the clone.
To catch it at the point at which the illegality is committed, you
would need to override Note.insertBefore etc with Element.insertBefore
etc. But at this stage the method has no idea that it is a clone it is
adding, so the only check it can make is to do a
document.getElementById to see if the id already exists - which might
be expensive.
On the other hand, there is a case for saying that
Element.insertBefore *should* make this check anyway, irrespective of
whether node being added is a clone or not. Of course  that would
break an awful lot of websites ... :-)

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to