Objekt verliert Werte @ tutorials.de: Tutorials, Forum & Hilfe

ZeroEnna · 26.06.06 15:53

Hallo zusammen

Ich will gerade eine kleine Drag & Drop Funktion mit JavaScript realisieren. Ich habe zwei Klassen erstellt: mousePos, welche die aktuelle Mausposition enthält und scale_n_drag, welche für das Verschieben des Elementes zuständig ist.

Nun habe ich aber das Problem, dass die einzelnen Eigenschaften wie z.B. dragable (scale_n_drag) ihre Werte verlieren. Bei Mousedown speichere ich die ID des Objektes in diese Variable, und beim Mouseup gebe ich diese per alert wieder aus (nur zu Testzwecken, wird später nicht mehr so sein). Beim Mousedown hat die Variable noch den richtigen wert, wenn ich sie aber bei Mouseup ausgebe, kommt nur 'undefined'. Der Code sieht wie folgt aus:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">    
        function mousePos()
        {
            this.x = 0;
            this.y = 0;
            
            this.setPos = function(e)
            {
                self.status = this.x;
                if(document.all)
                {
                    this.x = event.clientX + document.body.scrollLeft;
                    this.y = event.clientY + document.body.scrollTop;
                }
                else
                {
                    this.x = e.pageX;
                    this.y = e.pageY;
                }
            }
            
            this.getX = function()
            {
                return this.x;
            }
        }
    
        this.scale_n_drag = function()
        {
            this.width = 0;
            this.height = 0,
            this.dragable = false;
            this.pos = new Array();
            this.dim = new Array();
            this.mousePos = new Array();
            this.mouse = new mousePos();
            
            this.init=function(w, h)
            {
                this.width = w;
                this.height = h;
            }
            
            this.setDragable=function(id)
            {
                this.mousePos['x'] = this.mouse.x;
                this.mousePos['y'] = this.mouse.y;
                this.dragable = id;
                alert(this.dragable);
                document.onmousemove = this.move;
                document.onmouseup = this.unsetDragable;
            }
            
            this.move=function(e)
            {
                if(this.dragable)
                {
                    if(document.all)
                    {
                        this.pos['x'] = event.clientX + document.body.scrollLeft;
                        this.pos['y'] = event.clientY + document.body.scrollTop;
                    }
                    else
                    {
                        this.pos['x'] = e.pageX;
                        this.pos['y'] = e.pageY;
                    }
                    document.getElementById(this.dragable).style.marginLeft = (document.getElementById(this.dragable).offsetLeft + this.pos['x'] - this.mousePos['x'])+'px';
                    document.getElementById(this.dragable).style.marginTop = (document.getElementById(this.dragable).offsetTop + this.pos['y'] - this.mousePos['y'])+'px';
                }
            }
            
            this.unsetDragable=function()
            {
                alert(this.dragable);
                document.onmousemove = this.mouse.setPos;
                document.onmouseup = null;
                this.dragable = false;                
            }
        }
        
        if(document.captureEvents)
        {
            document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN);
        }

        var m = new mousePos();
        var d = new scale_n_drag();
        document.onmousemove = m.setPos;
    </script>
</head>

<body>
    <div style="width: 200px; height: 200px; background-color: #CCCCCC;" id="con" onmousedown="d.setDragable('con');">
    
    </div>
</body>
</html>

Wisst ihr vielleicht wo der Fehler liegt?

mfG
ZeroEnna

Gumbo · 26.06.06 15:59

Worauf bezieht sich denn das „this.scale_n_drag = function()“?

Sven Mintel · 26.06.06 16:17

Du verlierst den Bezug zum Objekt d

Du weist dem Dokument für Events Funktionsaufrufe folgendermassen zu:

Code :

1	document.onmousemove = this.move;

per this kannst du aber nur innerhalb des Objektes auf das Objekt zugreifen.
Von ausserhalb des Objektes...und dort befindest du dich, wenn ein Event im Dokument feuert, musst du das Objekt mit seinem Namen ansprechen:

Code :

1	document.onmousemove = d.move;

....damit die Sache dynamisch bleibt, solltest du innerhalb des Objektes eine Variable verwenden, in der du den Namen des Objektes speicherst... damit du diesen verwenden kannst bei der Zuweisung des Events an das Dokument.

ZeroEnna · 26.06.06 16:22

OK, das war schon mal der erste Fehler, funktioniert aber immer noch nicht. Hier ist der neue Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript">    
        function mousePos()
        {
            this.x = 0;
            this.y = 0;
            
            this.setPos = function(e)
            {
                self.status = this.x;
                if(document.all)
                {
                    this.x = event.clientX + document.body.scrollLeft;
                    this.y = event.clientY + document.body.scrollTop;
                }
                else
                {
                    this.x = e.pageX;
                    this.y = e.pageY;
                }
            }
            
            this.getX = function()
            {
                return this.x;
            }
        }
    
        function scale_n_drag()
        {
            this.width = 0;
            this.height = 0,
            this.dragable = false;
            this.pos = new Array();
            this.dim = new Array();
            this.mousePos = new Array();
            this.mouse = new mousePos();
            
            this.init = function(w, h)
            {
                this.width = w;
                this.height = h;
            }
            
            this.setDragable = function(id)
            {
                this.mousePos['x'] = this.mouse.x;
                this.mousePos['y'] = this.mouse.y;
                this.dragable = id;
                alert(this.dragable);
                document.onmousemove = this.move;
                document.onmouseup = this.unsetDragable;
            }
            
            this.move = function(e)
            {
                if(this.dragable)
                {
                    if(document.all)
                    {
                        this.pos['x'] = event.clientX + document.body.scrollLeft;
                        this.pos['y'] = event.clientY + document.body.scrollTop;
                    }
                    else
                    {
                        this.pos['x'] = e.pageX;
                        this.pos['y'] = e.pageY;
                    }
                    document.getElementById(this.dragable).style.marginLeft = (document.getElementById(this.dragable).offsetLeft + this.pos['x'] - this.mousePos['x'])+'px';
                    document.getElementById(this.dragable).style.marginTop = (document.getElementById(this.dragable).offsetTop + this.pos['y'] - this.mousePos['y'])+'px';
                }
            }
            
            this.unsetDragable = function()
            {
                alert(this.dragable);
                document.onmouseup = function(){};
                document.onmousemove = this.mouse.setPos;
                this.dragable = false;                
            }
        }
        
        if(document.captureEvents)
        {
            document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN);
        }

        var m = new mousePos();
        var d = new scale_n_drag();
        document.onmousemove = m.setPos;
        
        function sD(id)
        {
            d.setDragable(id);
        }
    </script>
</head>

<body>
    <div style="width: 200px; height: 200px; background-color: #CCCCCC;" id="con" onmousedown="sD('con');">
    
    </div>
</body>
</html>

Sven Mintel · 26.06.06 16:31

Du hast den selben Fehler noch weiter male im Skript:

Code :

document.onmousemove = this.move;
...
document.onmouseup = this.unsetDragable;
...
document.onmousemove = this.mouse.setPos;

ZeroEnna · 26.06.06 16:41

Aber wenn ich das this nicht setze, sagt es mir das die einzelnen Funktionen und Eiganschaften 'undefined' sind. Muss man denn das this nicht setzen, damit es die Funktion innerhalb der Klassen verwendet?
Hab noch nicht so viel Erfahrung mit der OOP in JavaScript.

mfG
ZeroEnna

Sven Mintel · 26.06.06 18:04

In dem Objekt selbst kannst/musst du das this verwenden.

Wenn du aber etwas dem Document zuweist, beziehst du dich dort per this nicht mehr auf das Ausgangsobjekt, sondern auf das Dokument...hier mal nen kleines Beispiel...probiere es aus, dann siehst du vielleicht, was ich meine

Code :

<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
<!--
function OBJECT()
{
  this.tagName='ich bin OBJECT() und habe keinen TagNamen';
  this.funktion=function()
    {
      alert(this.tagName);
    }
  document.body.onclick = new Function("alert('ich bin ' + this.tagName + 'und habe einen TagNamen')");
}
o=new OBJECT();
//-->
</script>
<br>Klick<br>
</body>
</html>

..in dem Objekt wird eine Variable "tagName" definiert und beim Klick auf den Body soll diese Ausgegeben werden.
Es kommt aber ganz was anderes heraus: durch die Zuweisung des Aufrufes an den Event des <body> bezieht sich this nunmehr auf selbigen, und nicht mehr auf OBJECT()

ZeroEnna · 26.06.06 19:52

Hmm....

Ich verstehe jetzt zwar warum es nicht geht, aber nicht wie ich es zum laufen bringe.
Was muss ich denn nun anstelle von this verwenden?

Sven Mintel · 26.06.06 20:26

Zitat von ZeroEnna

Was muss ich denn nun anstelle von this verwenden?

sofern du die Methoden des Objektes von ausserhalb des Objektes aufrufen willst, benötigst du dort wie erwähnt den Namen des Objektes...also in diesem Fall d

d ist global verfügbar, du kannst also von überall darauf zugreifen.

ZeroEnna · 27.06.06 09:08

Super!

Es hat geklappt. Vielen Dank für die Hilfe.

mfG
ZeroEnna

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Stateful-Bean verliert seine Werte warum?

Werte aus einem Objekt teilen?

Array in Session verliert Werte

Werte aus einem Objekt in ein anderes

Werte aus DataSet Objekt auslesen

E-Mail:

Abonnieren Abbestellen