✔ Objekt verliert Werte

ZeroEnna · 26. Juni 2006

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:

<!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. Juni 2006

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

Sven Mintel · 26. Juni 2006

Du verlierst den Bezug zum Objekt d

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

Code:

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:

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. Juni 2006

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

HTML:

<!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. Juni 2006

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. Juni 2006

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. Juni 2006

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. Juni 2006

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. Juni 2006

ZeroEnna hat gesagt.:
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. Juni 2006

Super!

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

mfG
ZeroEnna

✔ Objekt verliert Werte

ZeroEnna

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Sven Mintel

Mitglied

ZeroEnna

Erfahrenes Mitglied

Sven Mintel

Mitglied

ZeroEnna

Erfahrenes Mitglied

Sven Mintel

Mitglied

ZeroEnna

Erfahrenes Mitglied

Sven Mintel

Mitglied

ZeroEnna

Erfahrenes Mitglied

Neue Beiträge