Relativ leichte Frage für JS-Könner

26.02.2007, 22:07 #1

Ein wirklich sehr kleines, jedoch seeehr problematisches JScript bei dem ich kp hab wieso's nicht funktioniert.
An irgendwelche JS-Foren würd' ich mich lieber nicht wenden ... habn mich schonmal ziemlich zu Sau gemacht wegen sowas ... und kein Stück geholfen.

Also:
Nunja bitte, ich weiß, dass es nicht funktioniert ... also unnütze Posts einfach weg lassen! <(-_°<)

Bitteschön:

Code:

<script>
var xPos;
var yPos;
function selectObject() {       // "onClick" Ereignis ("BeispielObj")
xPos = window.event.x - document.getElementById('BeispielObj').style.left;
yPos = window.event.y - document.getElementById('BeispielObj').style.top;
}
function moveObject() {         // "onBlur" oder BodyClick Ereignis
document.getElementById('BeispielObj').style.left = window.event.x - xPos;
document.getElementById('BeispielObj').style.top = window.event.y - yPos;
}
</script>
<body onClick="moveObject();" leftmargin="0" topmargin="0">
<img id="BeispielObj" onClick="selectObject();" src="BeispielObj.bmp" border="0" style="position: absolute" />
</body>

Wenn's geht 'ne eher nahe liegende Methode ans Licht bringen ... auch wenn die obige nicht wirklich optimal ist.

P.S. Hab mich grad angemeldet! Also HALLO AN ALLE!

26.02.2007, 23:15 #2

Was soll das Script denn genau machen, wird mir gerade nicht ersichtlich. Ansonsten was ist BeispielObj, hast du die ID denn vergeben.
Wäre vielleicht hilfreich den kompletten HTML code mal zu sehn.

27.02.2007, 17:47 #3

Das Script soll eig. einfach ein beliebiges Obj. verschieben.

Hab' mal das Wichtigste (so wie ichs eig. auch nur am Anfang hatte...) hinzugefügt.
-> Hatte sogar Glück, als ich den Code nochmal probiert hab hat's im IE sogar das erste Mal geklappt... klickt man nochmal -> "Ungütiges Argument"
(Bei Opera funzt das Script überhaupt nicht.)

27.02.2007, 21:29 #4

Okay, jetzt konnte ich es bei mir testen. Im Internet Explorer funktioniert es ohne Probleme. Du musst nur darauf achten das das Objekt nicht teilweise aus dem Fenster abgelegt wird. Dann gibt es einen Fehler.

Warum es nichts im FireFox macht verstehe ich aber nocht nicht.

Edit: jetzt bekomm ich auch Fehler

27.02.2007, 21:35 #5

-> k ... aber beim 2. klick funzts bei mir auch im IE nicht

(also erst droppen und dann nochmal drauf klicken
-> dann kommt näml. der "Ungültiges Arg." Fehler
)

27.02.2007, 22:02 #6

Okay, der Fehler im Internet Explorer kommt wenn du nochmal auf das Bild klickst, wenn du es schonmal verschoben hast. Wenn du immer auf eine weiße Fläche klickst kein Problem.

Aber warum der Firefox dauernd moveObject is not defined schreit verstehe ich immer noch nicht.

Edit auch beim Firefox kommen wir weiter, dort scheint das Problem zu sein dass er noch nicht die Sprache selber zuordnen kann.

So eine Lösung steht fest:
1) Das Script ist in dieser Form nur Windows konform. siehe dazu
http://php-resource.de/forum/showthr...threadid=56952
2) Im Internet Explorer funktioniert es solange nicht nachdem verschieben / bei dem verschieben nochmal auf das Objekt geklickt wird.

Aber hier ist jetzt eine Lösung die bei Firefox und IE funktioniert:

Code:

<html>
<head>
<script type="text/javascript"> 
var xPos;
var yPos;

function selectObject(event) 
{       // "onClick" Ereignis ("BeispielObj")
xPos = event.clientX - document.getElementById('BeispielObj').style.left;
yPos = event.clientY - document.getElementById('BeispielObj').style.top;
}

function moveObject(event) 
{         // "onBlur" oder BodyClick Ereignis
document.getElementById('BeispielObj').style.left = event.clientX - xPos;
document.getElementById('BeispielObj').style.top = event.clientY - yPos;
}
</script>
</head>
<body onClick="moveObject(event)" leftmargin="0" topmargin="0">

<img id="BeispielObj" onClick="selectObject(event)" src="warninglabel.jpg" border="0" 

style="position:absolute">


</body>
</html>

28.02.2007, 15:05 #7

hehe klappt ^^

... leider nicht im Opera ... aber wer ausser ich benutzt schon Opera =)
thx für die Hilfe!

Wäre noch cool wenn du rausbekommst wieso's nicht bei mehrfachem Klick (und in Opera) klappt ^^

Ich versuch natürl. auch mein Glück

28.02.2007, 20:49 #8

Naja, wenn man mit stylesheet angaben bzw. werten arbeitet sollte man die Einheit nicht vergessen. Daher funzt es wahrscheinlich auch nur einmal. Für so Verscheibe Sachen würde ich auch eher nach Drag & Drop Art die Events MouseDown und MouseUp nutzen.

Hab mal bissl was verändert ... funzt im IE, FF und Opera sowie mit beliebig vielen Objekten.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Drag &amp; Drop mit Javascript</title>
<script type="text/javascript">
var object = 0;
function moveObject(event) 
{   // "onMouseMove" Ereignis des Bodys
    if( object != 0 ){ // Wenn Object ausgewählt => Verschieben
        object.style.left = (event.clientX - object.x) + "px";
        object.style.top = (event.clientY - object.y) + "px";
     }
}
function selectObject( reference , event) 
{   // "onMouseDown" Ereignis des Objects
    object   = reference;
    object.x = event.clientX - object.style.left.replace("px","");
    object.y = event.clientY - object.style.top.replace("px","");
}
function deselectObject()
{   // "onMouseUp" Ereignis des Objects
    object = 0;
}
</script>
<style type="text/css">
.object {position:absolute; height:100px; width:150px; 
            line-height:100px; text-align:center;
            background:red; border:1px solid black;    }
</style>
</head>
<body onmousemove="moveObject(event)" onmouseout="deselectObject()">

<div class="object" style="top:10px; left:10px;"
onmousedown="selectObject(this,event)" onmouseup="deselectObject()" 
>DRAG &amp; DROP ME</div>
 
<div class="object" style="top:120px; left:10px;" 
onmousedown="selectObject(this,event)" onmouseup="deselectObject()" 
>DRAG &amp; DROP ME</div>

<div class="object" style="top:230px; left:10px;" 
onmousedown="selectObject(this,event)" onmouseup="deselectObject()" 
>DRAG &amp; DROP ME</div>

</body></html>

Evtl hilft das ja ein wenig weiter.
Was mich aber noch interessieren würde:
Was hat das ganze mit Windows zu tun ? Oder meintest du den IE ?

28.02.2007, 22:42 #9

Oh, ja ich meine natürlich IE, arghs, gepennt.

01.03.2007, 16:01 #10

WOW!!!

<(^_^<) yeah (>^_^)>

ehrlich! thx an beide

EDIT: hab garnicht gewusst, dass das mit "this" geht....

01.03.2007, 21:58 #11

Willkommen in der objektorientierten Programmierung

Ähnliche Themen, die dich vielleicht interessieren
Thema	Autor	Forum	Antworten	Letzter Beitrag
Verschwörungs Theorien . Was geschah wirklich am 11 September ?	Christian	Philosophie und Gedanken	82	05.06.2006 03:58
Dumme Frage - leichte Antwort?	super_philipp	Karriere und Bildung	6	03.07.2004 18:38
Antworten aus "Der Schwächste fliegt"	Grandylein	Fun und Rätsel-Planet	10	21.07.2002 21:21
Die Wächter - eine neue Art zu leben....	MonoMan	Philosophie und Gedanken	19	30.08.2001 14:28

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche