nicht angemeldet
Hallo an alle Nachtschwärmer,
seit Stunden hänge ich über einem Problem und komme nicht auf dessen Lösung.
Ich habe einen Kontainer mit einigen Kategorien und zu jeder Kategorie sollen ein paar Fragen gehören (siehe HTML),
die per Mausklick ein- und ausgeblendet werden (siehe JS und CSS, das klappt alles schon).
Klickt man auf eine Frage, soll das Element geklont werden (das klappt auch) und der Klon sollte genau
über der Frage liegen (absolut positioniert, mit z-index, um ihn dann per drag'n'drop von dort aus weg ziehen zu können).
Und hier ist mein Problem:
Der Klon liegt immer im linken oberen Eck von "kontainer", anstatt über einer der Fragen.
Offensichtlich wird in der Funktion klonen() bei der Auswertung des Events (onmousedown) offsetX bzw. layerX (und -Y)
von "kontainer" ermittelt und nicht von z.B.: "kat1frag1".
Ich komme leider nicht dahinter wiso und wie es richtig zu lösen wäre.
Bitte helft mir auf die Sprünge und sorry, dass ich etwas viel Quelltext pasten musste.
Vielen Dank und viele Grüße
Michael
----------- HTML -----------------
<div id="kontainer" class="kontainer">
<div id="vorlagen" class="vorlagen">
<div class="kategorie">
<div id="kat1" onclick="klappKat(this.id)">Kategorie1</div>
<div id="kat1frag1" class="frage">
kat1frag1
</div>
<div id="kat1frag2" class="frage">
kat1frag2
</div>
</div>
<div class="kategorie">
<div id="kat2" onclick="klappKat(this.id)">Kategorie2</div>
<div id="kat2frag1" class="frage">
kat2frag1
</div>
<div id="kat2frag2" class="frage">
kat2frag2
</div>
</div>
</div>
</div>
----------- JAVASCRIPT -----------------
// Kategorienavigation - Auf-/Zuklappbare Kategorien
function klappKat (wo) {
if(!aufgeklappt) {
klappe(wo, "auf");
}
else {
if (aufgeklappt == wo) {
klappe(wo, "zu");
aufgeklappt = false;
return true;
}
else if (aufgeklappt != wo) {
klappe(aufgeklappt, "zu");
klappe(wo, "auf");
}
}
aufgeklappt = wo;
}
function klappe(wo, wie) {
var anzeige = "block";
if (wie == "zu") anzeige = "none";
var el = document.getElementById(wo);
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 ermitteln
var was;
if(ie) was = event.srcElement.id;
if(!ie) was = e.target.id;
// wenns schon einen Klon gibt mehrfaches Klonen verhindern und stattdessen verschieben aktiviern
if (was.indexOf("klon") != -1) {
bewegflag = true;
}
// wenns noch keinen Klon gibt
else {
var el = document.getElementById(was);
//Element klonen
var klon = el.cloneNode(true);
//class-Attribut neu setzen
var klasse = document.createAttribute("class");
klasse.nodeValue = "frageklon";
klon.setAttributeNode(klasse);
//neue ID setzen (neueID = alteID + klon)
var klonID = document.createAttribute("id");
klonID.nodeValue = was + "klon";
klon.setAttributeNode(klonID);
IDklon = was + "klon"; // IDklon ist global
// Positionieren (das geklonte Element überlappend)
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;
posarr[5] = ev.offsetY;
}
else if (!ie) {
posarr[4] = ev.layerX;
posarr[5] = ev.layerY;
}
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;
// Positionieren
klon.setAttribute("style", "");
var ks = klon.style;
ks.left = parseInt(lin) + "px";
ks.top = parseInt(obn) + "px";
ks.width = parseInt(posarr[0]-15) + "px";
// Klon einfügen
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;
}