Eventhandling and positioning of objects

[Michi]

Hallo,

for hours i'm searching for an solution for the following problem:
Inside a container i have some cathegories and in each of them some
questions (look at HTML),
The questions should be shown or hidden when clicking a cathegory (look
JS and CSS).
With a click on a question, it should be cloned and the clone should be
placed over the question so you can drag and drop it from there to
somewhere else.
The problem:
The clone is positioned in the upper left corner of "container" instead
of "question".
It looks like i get wrong values for offsetX (and -Y and layerX (and
-Y) in the function klonen()
(those for "container" instead of i.g. "cat1ques1".
Can someone tell me what's going wrong?

Many thanks and best regards

Michael
----------- HTML -----------------

<div id="container" class="kontainer">
<div id="vorlagen" class="vorlagen">
<div class="cathegory">
<div id="cat1" onclick="klappKat(this.id)">Kategorie1</div>
<div id="kat1frag1" class="frage">
cat1ques1
</div>
<div id="cat1ques2" class="frage">
cat1ques2
</div>
</div>
<div class="cathegory">
<div id="cat2" onclick="klappKat(this.id)">Kategorie2</div>
<div id="cat2ques1" class="frage">
kat2frag1
</div>
<div id="cat2ques2" class="frage">
kat2frag2
</div>
</div>
</div>
</div>

----------- JAVASCRIPT -----------------

// cathegory navigation (show and hide questions)
function klappKat (where) {
if(!opend) { // var opend is globally, in the beginning it's false
klappe(where, "open");
}
else {
if (opend == where) {
klappe(where, "close");
opend = false;
return true;
}
else if (opend != where) {
klappe(opend, "close");
klappe(where, "open");
}
}
opend = where;
}

function klappe(where, how) {
var anzeige = "block";
if (how == "close") anzeige = "none";
var el = document.getElementById(where);
el = el.nextSibling;
while (el != null) {
if (el.nodeType == 1) {
el.style.display = anzeige;
if (el.attachEvent) el.attachEvent("onmousedown", klonen);
if (el.addEventListener) el.addEventListener("mousedown", klonen,
false);
}
el = el.nextSibling;
}
}

function klonen(e) {
// event target
var was;
if(ie) was = event.srcElement.id;
if(!ie) was = e.target.id;

// if there's already a clone, prevent multiple cloning
if (was.indexOf("klon") != -1) {
bewegflag = true;
}

// if there's no clone
else {
// cloning
var el = document.getElementById(was);
var klon = el.cloneNode(true);
var klasse = document.createAttribute("class");
klasse.nodeValue = "frageklon";
klon.setAttributeNode(klasse);
var klonID = document.createAttribute("id");
klonID.nodeValue = was + "klon";
klon.setAttributeNode(klonID);
IDklon = was + "klon"; // IDklon global

// positioning - get position
if(!e) var e = window.event;
var ev = e;
if (ie) ev.cancelBubble = true;
if (ev.stopPropagation) ev.stopPropagation();

posarr[0] = el.offsetWidth; // posarr ist global
posarr[1] = el.offsetHeight;
posarr[2] = ev.clientX;
posarr[3] = ev.clientY;
if (ie) {
posarr[4] = ev.offsetX; // maybe here is the problem?
posarr[5] = ev.offsetY; // and here
}
else if (!ie) {
posarr[4] = ev.layerX; // or here
posarr[5] = ev.layerY; // or here
}
var lin = (posarr[2] - posarr[4]);
var obn = (posarr[3] - posarr[5]);

var pos = posarr[0]+" | "+posarr[1]+" | "+ posarr[2]+" | "+
posarr[3]+" | "+ posarr[4]+" | "+ posarr[5] + " |lin: " + lin + " |obn:
" + obn;
window.status = pos;

// set position
klon.setAttribute("style", "");
var ks = klon.style;
ks.left = parseInt(lin) + "px";
ks.top = parseInt(obn) + "px";
ks.width = parseInt(posarr[0]-15) + "px";

// append clone to document
el.appendChild(klon);
}
}

------------- CSS --------------
..kontainer {
width: 600px;
}

..kontainer .vorlagen {
font: 1em/1.3 Verdana, Arial, Helvetica, sans-serif;
background: #d9d9d9;
width: 500px;
border: 2px outset #708090;
padding: 15px;
overflow: auto;
}

..kontainer .vorlagen .kategorie {
letter-spacing: 0.8em;
font-weight: bold;
color: #FFFAFA;
background: #ccc;
border: 3px inset #708090;
padding: 10px 10px 10px 10px;
display: block;
}

..kontainer .vorlagen .kategorie .frage {
font: 0.8em/1.2 Verdana, Arial, Helvetica, sans-serif;
background: #FFFFF0;
color: #000;
border: 2px outset #708090;
padding: 5px 5px 5px 5px;
display: none;
}

..kontainer .vorlagen .kategorie .frageklon {
font: 0.6em/1.2 Verdana, Arial, Helvetica, sans-serif;
background: #9FA0FF;
color: #000;
border: 2px outset #708090;
padding: 5px 5px 5px 5px;
display: inline;
position: absolute;
top: 0;
left: 0;
z-index:100;
cursor: move;
}

[Matt Kruse]

Michi wrote:

The clone is positioned in the upper left corner of "container"
instead of "question".
It looks like i get wrong values for offsetX (and -Y and layerX (and
-Y) in the function klonen()

You should be using offsetTop and offsetLeft, and walking up the element
chain to add each up. Read up about these properties online and how they are
values relative to the offsetParent element.

The logic to find the position of an arbitrary object on a page can be found
here:
http://www.javascripttoolbox.com/lib/objectposition/

This lib is much more accurate than others which simply sum up the offset*
values to find position and could surely be plugged into your code to easily
get accurate positioning results.

Good luck!

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[TheBagbournes]

For drag and drop, try using the YAHOO UI library:

http://developer.yahoo.com/yui/

Well documented, reasonably easy to use, good browser compatibility.

ExG