creating new elements & adding drag & drop functionalities (with wz_dragdrop.js library)

[misower]

var c = document.getElementById("PanelTree");
// PanelTree is a <div> element!

var n = document.createElement("div");
n.setAttribute('id', 'nu');
n.setAttribute('style', 'position:absolute;left:0px;top:0px;');

var tmp2 = document.createTextNode('hello');

n.appendChild(tmp2);
c.appendChild(n);

//Here evrething works, I see the element attached on PanelTree
// but when I add this..

ADD_DHTML("nu");
dd.elements.nu.write("new hello");
// "new hello" is written
dd.elements.controlPan.addChild(dd.elements.nu);
// it is visible but it doesn't have drag & drop funtionalites!!
//Why??


Maybe wz_dragdrop.js library does not support elements created
dinamically??

My head hurts.. my heart too..

Please help!!

Miko

 

[VK]

dd.elements.nu.write("new hello");

What is that? Is your custom write() method?

Otherwise there is only document.write() method and it clears the page
and kills the script if used after the page loaded. The only exception
is to write to another iframe / frame.

 

[Thomas 'PointedEars' Lahn]

var c = document.getElementById("PanelTree");
// PanelTree is a <div> element!

var n = document.createElement("div");
n.setAttribute('id', 'nu');
n.setAttribute('style', 'position:absolute;left:0px;top:0px;');

Do not use setAttribute(), its implementations are buggy.

n.id = 'nu';
if (typeof n.style != "undefined)
{
n.style.position = 'absolute';
n.style.left = '0';
n.style.top = '0';
}

var tmp2 = document.createTextNode('hello');

n.appendChild(tmp2);
c.appendChild(n);

//Here evrething works, I see the element attached on PanelTree
// but when I add this..

ADD_DHTML("nu");
dd.elements.nu.write("new hello");

Am I assuming correctly that ADD_DHTML("nu") adds a reference to the element
with ID `nu' to the dd.elements collection? However HTMLDivElement objects
do not have a write() method. Maybe you are assuming that positioned `div'
elements become NN4-only Layer objects which have a _document.write()_
method. (Well, maybe not )

// "new hello" is written
dd.elements.controlPan.addChild(dd.elements.nu);
// it is visible but it doesn't have drag & drop funtionalites!!
//Why??


Maybe wz_dragdrop.js library does not support elements created
dinamically??

Maybe. If you pointed to the library you are using and error messages, it
would have been possible to find that out.

OK, today's my social day: the first Google hit points to
<URL:http://www.walterzorn.de/dragdrop/dragdrop.htm>.
Let's see, there is <URL:http://www.walterzorn.de/scripts/wz_dragdrop.js>:

| function ADD_DHTML(d_o) // layers only!
| {
| d_o = new DDObj(d_o);
| dd.addElt(d_o);
| dd.addProps(d_o);
| dd.mkWzDom();
| }

OK, ADD_DHTML() creates a new DDObj ...

| dd.addElt = function(d_o, d_p)
| {
| dd.elements[d_o.name] =
| dd.elements[d_o.index = dd.elements.length] = d_o;
| if(d_p) d_p.copies[d_o.name] = d_p.copies[d_p.copies.length] = d_o;
| };

| function DDObj(d_o, d_i)
| {
| this.id = d_o;
| [...]
| this.name = this.id + (d_i || '');
| [...]
| }

.... dd.addElt() adds the object to the `elements' collection. So your

dd.elements.nu.write

refers to

| DDObj.prototype.write = function(d_x, d_o)
| {
| this.text = d_x;
| if(!this.div) return;
| if(dd.n4)
| {
| (d_o = this.div.document).open();
| d_o.write(d_x);
| d_o.close();
| dd.getWH(this);
| }
| else
| {
| this.css.height = 'auto';
| this.div.innerHTML = d_x;
| if(!dd.ie4) dd.recalc();
| // n6.0: recalc twice
| if(dd.ie4 || dd.n6) setTimeout('dd.recalc();', 0);
| }
| };

Now you have to find out which branch in DDObj.prototype.write() is taken.
`dd' refers to a WZDD object:

| function WZDD()
| {
| [...]
| this.n4 = !!(document.layers && typeof document.classes != dd_u);
| [...]
| }
| var dd = new WZDD();

The next step would be to find out what each operand evaluates to in a
boolean expression and then check each statement in the respective branch.
Happy debugging!

My head hurts.. my heart too..

You should see a doctor immediately ;-)


PointedEars