Koordinaten eines layers bestimmen

Anonym · 27. Juni 2002 um 23:05

hallo,

ich habe einen layer der sich frei verschieben lässt. nun möchte ich ihn verschieben und seine position in verschobenem zustand in einem cookie speichern. zuerst muss ich hierfür natürlich die neuen koordinaten bestimmen. aber wie?

gruß
stephan

Klaus_6c5fa6 · 28. Juni 2002 um 23:07

Hi,

beim Document Object Model und bei Microsofts all-Objekt greifst du auf die CSS Style Attribute zu, also layer.style.left und layer.style.top, während es beim Netscape-4-Layer (den du hoffentlich nicht benutzt) einfach layer.left und layer.top heißt.
Das gleiche gilt auch für width und height.

cu
Klaus

Anonym · 30. Juni 2002 um 10:41

hallo klaus,

aber damit kann ich die koordinaten doch nicht dynamisch bestimmen? das objekt ist beim laden der seite ganz oben links. wenn ich es nun mit dem cursor verschirebe ist es meinetwegen irgendwo unten. jetzt muss ich genau diese position bestimmen. ich verzweifele und weiß echt bald nicht mehr weiter.

gruß
stephan

Klaus_6c5fa6 · 30. Juni 2002 um 12:39

Hi,

Doch doch, damit kannst du die Koordinaten dynamisch bestimmen. Du kannst sogar die Werte verändern!

layer.style.left = 50;
layer.style.top = 20;

cu
Klaus

Anonym · 30. Juni 2002 um 17:14

damit gebe ich ja nur die koordinaten an, aber ich muss sie ja iregndwie bestimmen, am besten irgendwo ablesen können. bevor ich sie da angeben kann, muss ich sie ja irgendwie haben. aber wie???

gruß
stephan

Klaus_6c5fa6 · 1. Juli 2002 um 21:41

Hi,

was willst du eigentlich noch? Ich hab doch geschrieben dass layer.style.left und layer.style.top die aktuellen Werte enthalten. Probiers einfach aus! Es klappt!

cu
Klaus

Anonym · 4. Juli 2002 um 23:59

hallo klaus,
leider bin ich kein sonderlich großer javascript freak und weiß damit nicht sonderlich viel anzufangen. wie muss das script aussehen? so?

document.write(„layer.style.top“);

das klappt nicht, da kommt nur statisch layer.style.top heraus.

gruß
stephan

Anonym · 5. Juli 2002 um 09:10

Nein, wenn dann muss es heissen:

document.write(layer.style.top);

Ohne die Hochkommatar. Mit - wuerde bedeuten, Du moechtest die Zeichenkette „layer.style.top“ ausgeben, was etwas anderes ist als als der Wert der top-Position des Layers.

Aber auch das wird vermutlich noch nicht funktionieren, denn zu dem Zeitpunkt ist hoechstwahrscheinlich der Layer mit Namen „layer“ entweder noch nicht gesetzt oder im HTML Dokument noch nicht bekannt.

Klaus_6c5fa6 · 5. Juli 2002 um 20:57

Hi,

der Name deines Layers ist das was du im id="…" Argument geschrieben hast, das habe ich einfachsheitshalber „layer“ genannt. Wenn dein Layer etwa so aussieht:

Text

Dann heißt dein Layer „Mein_Layer“, also kannst du, wenn du den M$ Internet Explorer verwendest, z.B. mit

document.all.Mein\_Layer.style.top

auf die Eigenschaften zugreifen. Es geht auch:

document.all["Mein\_Layer"].style.top

Wenn du öfter drauf zugreifst, kannst du das ja in einer Variable speichern:

var layer = document.all.Mein\_Layer;
alert(layer.style.left);

Wenn du das modernere Document Object Model (DOM) verwendest (ab IE5, NS6 und dem neuesten Opera-Browser) kannst du

document.getElementById("Mein\_Layer")

verwenden.

cu
Klaus

Anonym · 5. Juli 2002 um 20:46

ich hab dieses script (siehe unten) und möchte nun das die koordinaten jeweils in einer textbox generiert werden. wenn ich das ganze also nach unten ziehe, soll in der box x=1024 und y=768 stehn. irgendwie kalppt as damit nicht hier das drag script

<!–
.drag{position:relative;cursor:hand;left:230}
–>

<!–

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? „HTML“ : „BODY“

while (firedobj.tagName!=topelement&&firedobj.className!=„drag“){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className==„drag“){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+230)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function(„dragapproved=false“)
//–>
This is some text inside a DIV

Klaus_6c5fa6 · 5. Juli 2002 um 21:24

Hi,

wenn ich schon dabei bin kann ich ja auch gleich ne fertige Lösung schreiben:

Du ergänzt deinen Layer mit einem id-Argument:

id="layer\_img"\>
&nbsp;
 id="layer\_text"\>
This is some text inside a DIV

Ich nehme an es geht dir um das Bild. Dann schreibst du in deinem Script:

\<!--
&nbsp;
function printLayerPos()
{
 var layer = null;
 if (document.getElementById) // DOM
 layer = document.getElementById("\<B\>layer\_img\</B\>");
 else if (document.all) // Micro$oft IE4
 layer = document.all["\<B\>layer\_img\</B\>"];
 if (!layer)
 return;
&nbsp;
 // Hier kann die Variable \<B\>layer\</B\> verwendet werden.
 // Ein Beispiel für eine Auswertung:
 window.alert("Layer ist an Position x="
 + layer.style.left + " y=" + layer.style.top);
}
&nbsp;
// --\>

So ungefähr könnte es aussehen. Damit ist auch egal, welchen Browser du verwendest.

cu
Klaus

Anonym · 5. Juli 2002 um 21:34

Drag
\<!--
 .drag{position:relative;cursor:hand;left:230}
--\>

\<!--

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

var ie = document.all;
var ns6 = document.getElementById && !document.all;

var dragapproved = false;
var z,x,y;

function writePos(prmXpos,prmYpos)
{
 if (ie) {
 window.document.all["idDrag"].innerHTML = "("+prmXpos+"/"+prmYpos+")";
 } else {
 window.document.getElementById("idDrag").innerHTML = "("+prmXpos+"/"+prmYpos+")";
 }
}

function move(e)
{
 if (dragapproved) {
 z.style.left = ns6 ? temp1+e.clientX-x : temp1+event.clientX-x;
 z.style.top = ns6 ? temp2+e.clientY-y : temp2+event.clientY-y;

 writePos(z.style.left,z.style.top);
 return false;
 }
}

function drags(e)
{
 if (!ie && !ns6) return;

 var firedobj =ns6 ? e.target : event.srcElement;
 var topelement =ns6 ? "HTML" : "BODY";

 while (firedobj.tagName!=topelement&&firedobj.className!="drag") {
 firedobj = ns6 ? firedobj.parentNode : firedobj.parentElement;
 }

 if (firedobj.className=="drag") {
 dragapproved=true;
 z=firedobj;
 temp1=parseInt(z.style.left+230);
 temp2=parseInt(z.style.top+0);
 x=ns6? e.clientX: event.clientX;
 y=ns6? e.clientY: event.clientY;
 document.onmousemove=move;
 return false;
 }
}

document.onmousedown=drags;
document.onmouseup=new Function("dragapproved=false");

//--\>
 This is some text inside a DIV

Anonym · 6. Juli 2002 um 03:13

hallo ihr zwei,

vielen dank, das ist wirklich lieb von euch. aber bei der version von vir2allender tut sich gar nichts mehr, und bei der vrsion von klaus passiert nichts anderes als bei meinem script das ich eben gepostet hab, auch.

die div box bzw. das bild drin konnte man ja schon früher verschieben. es geht mir aber wie gesagt darum, in einer textbox die aktuelle position des layers auszumachen, damit ich diese position in cookies speichern kann. wenn jemand das bild also auf die linke seite zieht, soll es auch da bleiben und nicht beim neu laden wieder oben rechts an der ecke kleben

gruß
stephan

Anonym · 6. Juli 2002 um 09:10

Es funktioniert wunderbar. Du darfst blos nicht die ganye Sache per Cut&amp:stuck_out_tongue_winking_eye:aste uebernehmen und zwar aus folgendem Grund:

Die Kommentare im Script machen Probleme:

//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com

Wenn du die Sache 1 zu 1 uebernimmst dann kann es so aussehen:

title=„jsScript“>

Anonym · 6. Juli 2002 um 09:11

Drag
<!–
.drag{position:relative;cursor:hand;left:230}
–>

<!–

var ie = document.all;
var ns6 = document.getElementById && !document.all;

var dragapproved = false;
var z,x,y;

function writePos(prmXpos,prmYpos)
{
if (ie) {
window.document.all[„idDrag“].innerHTML = „(“+prmXpos+"/"+prmYpos+")";
} else {
window.document.getElementById(„idDrag“).innerHTML = „(“+prmXpos+"/"+prmYpos+")";
}
}

function move(e)
{
if (dragapproved) {
z.style.left = ns6 ? temp1+e.clientX-x : temp1+event.clientX-x;
z.style.top = ns6 ? temp2+e.clientY-y : temp2+event.clientY-y;

writePos(z.style.left,z.style.top);
return false;
}
}

function drags(e)
{
if (!ie && !ns6) return;

var firedobj =ns6 ? e.target : event.srcElement;
var topelement =ns6 ? „HTML“ : „BODY“;

while (firedobj.tagName!=topelement&&firedobj.className!=„drag“) {
firedobj = ns6 ? firedobj.parentNode : firedobj.parentElement;
}

if (firedobj.className==„drag“) {
dragapproved=true;
z=firedobj;
temp1=parseInt(z.style.left+230);
temp2=parseInt(z.style.top+0);
x=ns6? e.clientX: event.clientX;
y=ns6? e.clientY: event.clientY;
document.onmousemove=move;
return false;
}
}

document.onmousedown=drags;
document.onmouseup=new Function(„dragapproved=false“);

//–>
This is some text inside a DIV

Anonym · 7. Juli 2002 um 13:48

WOW!!! HAMMER! ES KLAPPT! DANKE DANKE DANKE VIR2ALLENDER!!!

VIELEN DANK!

STEPHAN