Eventhandling and positioning of objects

Discussion in 'Javascript' started by Michi, Jun 12, 2006.

  1. Michi

    Michi Guest

    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;
    }
    Michi, Jun 12, 2006
    #1
    1. Advertising

  2. Michi

    Matt Kruse Guest

    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
    Matt Kruse, Jun 12, 2006
    #2
    1. Advertising

  3. 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
    TheBagbournes, Jun 13, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andrea
    Replies:
    0
    Views:
    370
    Andrea
    Dec 18, 2003
  2. Claes Rådström
    Replies:
    3
    Views:
    339
    Claes Rådström
    Feb 5, 2004
  3. Herfried K. Wagner [MVP]
    Replies:
    12
    Views:
    565
    =?Utf-8?B?YmFsbWVyY2g=?=
    Dec 1, 2005
  4. cm
    Replies:
    2
    Views:
    2,004
  5. Franz Fitz

    Problem with Eventhandling in user control

    Franz Fitz, Oct 30, 2003, in forum: ASP .Net Building Controls
    Replies:
    1
    Views:
    121
    John Saunders
    Oct 30, 2003
Loading...

Share This Page