Javascript: Objektorientierung und Drag and Drop (Teil 2)

Vererbung

Im zweiten Teil geht es um die Vererbung, ich habe u.a. in den Kommentaren den Begriff Klassen verwendet (natürlich gibt es in Javascript keine Klassen in dem Sinne), da ich aber versucht habe Strukturen nachzubilden, wie sie aus Java bzw. C# bekannt sind, erklärt sich das Ganze so besser.

Ob eine Verkettung der drei definierten Klassen möglich ist, gilt es noch auszutesten!

Javascript im HEAD (u.a. Objektinstanzierung):

window.onload = Init;

function Init()  {
  // neues Objekt der Subklasse instanzieren
  var dragObj = new DragById("dragable_1");
  // weiterere moegliche Instanzierung
  //var dragObj = new DragInFrame(316, 92);  
  
  // Events öffentlichen Methoden aus
  // dem instanziertem Objekt zuweisen
  document.getElementById("dragpanel").onmousedown =
    dragObj.startDrag;
  document.getElementById("dragpanel").onmousemove =
    dragObj.Drag;
  document.getElementById("dragpanel").onmouseup =
    dragObj.endDrag; 
}

Javascript im HEAD (die Basisklasse):

function DragObj()  {
  // Variable zur Rückgabe
  // von öffentlichen Methoden (Pattern)
  var that = {};
  // Objektvariablen
  this.movie       = null;
  this.startX      = 0;
  this.startY      = 0;
  this.start_drag  = false;

  // öffentliche Methoden
  that.startDrag = function(e)  {
    // Browserweiche
    if(!e)  {  // IE
      e = window.event;
      this.movie = e.srcElement;
    }
    else
      this.movie = e.target;
     
    this.startY =
      e.screenY - parseInt(this.movie.style.top);
    this.startX =
      e.screenX - parseInt(this.movie.style.left);
  
  this.start_drag = true;
  }
  
  that.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;

      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
    
      this.movie.style.left = newX + "px";   
      this.movie.style.top  = newY + "px";
   
      document.title = "X: " + newX + " Y: " + newY;  
    } 
  }
  
  that.endDrag = function()  {
    this.start_drag = false;
  }
    
  return that;
}

Javascript im HEAD (die Subklassen):

function DragById(objId)  { 
  // Konstruktor der Basisklasse aufrufen 
  this.constructor();
  // öffentliche Methode der Basisklasse überschreiben
  this.startDrag = function(e)  {
    if(document.getElementById(objId))  {
      this.movie = document.getElementById(objId);
        
      this.startY =
        e.screenY - parseInt(this.movie.style.top);
      this.startX =
        e.screenX - parseInt(this.movie.style.left);
  
      this.start_drag = true;
    }
  }    
}
// Initialisierung der Vererbung
DragById.prototype = new DragObj();

// weitere abgeleitete Klasse definieren
function DragInFrame(frameWidth, frameHeight)  { 
  // Konstruktor der Basisklasse aufrufen 
  this.constructor();
  // öffentliche Methode der Basisklasse überschreiben
  this.Drag = function(e)  {
    if(this.start_drag)  {
      if(!e)
        e = window.event;
  
      var newX = e.screenX - this.startX;
      var newY = e.screenY - this.startY;
    
      if(newX > 0 && newX < frameWidth)
        this.movie.style.left = newX + "px";   
      if(newY > 0 && newY < frameHeight)
        this.movie.style.top  = newY + "px";
   
      document.title = "X: " + newX + " Y: " + newY;  
    } 
  }
}
// Initialisierung der Vererbung
DragInFrame.prototype = new DragObj();

HTML im BODY:

<img src="html.gif"
style="position:absolute; top:0; left:0;"
onmousedown="return false;"
onmousemove="return false;"
width="129" height="108" id="dragable_1" />