Javascript - Objektorientierung und Drag and Drop (1/2)

Konstruktor, Objektvariablen, private und öffentliche Methoden

Dieser erste Teil ist an das vor einiger Zeit veröffentlichte Slider-Skript angelehnt. Hier wird die Logik aus dem älterem Post in objektorientierter Form verwendet.
Im ersten Teil wird mit Javascript eine aus Java oder C# bekannte Objektstruktur verwendet, um Objekte mittels Konstruktor zu instanzieren, in den Objekten Objektvariablen zu verwenden und mit öffentlichen und privaten Methoden zu arbeiten.

Javascript im HEAD (u.a. Objektinstanzierung):

window.onload = Init;

function Init()  {
  // neues Objekt instanzieren
  var dragObj = new DragObj;
  // Events öffentlichen Methoden aus
  // instanziertem Objekt zuweisen
  document.onmousedown = dragObj.startDrag;
  document.onmousemove = dragObj.Drag;
  document.onmouseup   = dragObj.endDrag;  
}

Javascript im HEAD (das Objekt, seine Variablen und Methoden):

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;
 
    var id = this.movie.id;   
    
    if(IsDragable(id))  {  
      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";  
    } 
  }
  
  that.endDrag = function()  {
    this.start_drag = false;
  }
  
  // private Methode
  function IsDragable(id)  {
    // prüfen ob in der ID des angelickten Objektes
    // das Wort "dragable" vorkommt (damit nicht
    // alles verschoben werden kann) 
    if(id.split("_")[0] == "dragable")
     return true;
       
    return false;
  }
  
  return that;
}

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" />