Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Eventhandling and positioning of objects

Thread Tools

Eventhandling and positioning of objects

Posts: n/a

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


----------- HTML -----------------

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

----------- 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) { = anzeige;
if (el.attachEvent) el.attachEvent("onmousedown", klonen);
if (el.addEventListener) el.addEventListener("mousedown", klonen,
el = el.nextSibling;

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

// 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";
var klonID = document.createAttribute("id");
klonID.nodeValue = was + "klon";
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 =;
ks.left = parseInt(lin) + "px"; = parseInt(obn) + "px";
ks.width = parseInt(posarr[0]-15) + "px";

// append clone to document

------------- 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;
cursor: move;

Reply With Quote
Matt Kruse
Posts: n/a
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

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

Reply With Quote
Posts: n/a
For drag and drop, try using the YAHOO UI library:

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

Reply With Quote

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
EventHandling problem : Java has solution but what about Microsoft??? Herfried K. Wagner [MVP] ASP .Net 12 12-01-2005 09:40 PM
Eventhandling with TableSorter and TableFilterer cm Java 2 08-09-2004 09:36 AM
Eventhandling in Page hierarchies, how does it really work ? Claes Rådström ASP .Net 3 02-05-2004 08:47 AM
Create controls dynamic in eventhandling Andrea ASP .Net 0 12-18-2003 03:11 PM
Problem with Eventhandling in user control Franz Fitz ASP .Net Building Controls 1 10-30-2003 10:10 PM