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

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

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

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

Javascript - Schieberegler (Slidebar)

Cross-Browser kompatibel und XHTML-valide

Zum Testen einfach den Slider bewegen.

TEST

Javascript im HEAD:

// Startwert des Mouseevents speichern
var startY = 0;
// Starten und Beenden des Drag-Events
var start_drag = false;
// Dragobjekt
var slider = null;

window.onload = Init;

function Init()  {
  slider = document.getElementById("slidebar");
  slider.style.position = 'absolute';
  slider.style.top = '25px';
  slider.style.left = '1px';
  
  slider.onmousedown = StartDrag;
  document.onmousemove = Drag;
  document.onmouseup = StopDrag;
  
  // Standardevents ausschalten (Firefox)
  with(document.getElementById("slidebarwrapper"))
  { 
    onmousedown = function() { return false; };
    onmousemove = function() { return false; };
  }
}
function StartDrag(e)  {
  // Browserweiche
  if(!e)
    e = window.event;
  
  // Startwert merken  
  startY = e.screenY - parseInt(slider.style.top);
  start_drag = true;
}
function Drag(e)  {
  if(start_drag)  {
    // Browserweiche
    if(!e)
      e = window.event;
      
    // Mausposition - Startwert
    var posY = e.screenY - startY;
    // Schiebebereich einschraenken    
    if(posY > 25 && posY < 70)  {
      // Position zuweisen
      slider.style.top = posY + "px";
      // Schriftgroesse aendern
      document.getElementById("testword").style.fontSize = posY - 10 + "px";
    }
  }
}
function StopDrag(e)  {
  start_drag = false;
}

CSS im HEAD:

#slidebarwrapper  {
  position: relative;
  width: 127px;
  height: 106px;
}
#testword  {
  margin: 0;
}

HTML im BODY:

<div id="slidebarwrapper">
  <img src="html.gif" width="127" height="106" alt="HTML" />
  <img src="slider.gif" width="24" height="8"
  alt="Schriftgrösse regeln" id="slidebar" />
</div>
<p id="testword">TEST</p>

Javascript - Schieberegler (Slidebar)

Cross-Browser kompatibel und XHTML-valide

Zum Testen einfach den Slider bewegen.

TEST

Javascript im HEAD:

// Startwert des Mouseevents speichern
var startY = 0;
// Starten und Beenden des Drag-Events
var start_drag = false;
// Dragobjekt
var slider = null;

window.onload = Init;

function Init()  {
  slider = document.getElementById("slidebar");
  slider.style.position = 'absolute';
  slider.style.top = '25px';
  slider.style.left = '1px';
  
  slider.onmousedown = StartDrag;
  document.onmousemove = Drag;
  document.onmouseup = StopDrag;
  
  // Standardevents ausschalten (Firefox)
  with(document.getElementById("slidebarwrapper"))
  { 
    onmousedown = function() { return false; };
    onmousemove = function() { return false; };
  }
}
function StartDrag(e)  {
  // Browserweiche
  if(!e)
    e = window.event;
  
  // Startwert merken  
  startY = e.screenY - parseInt(slider.style.top);
  start_drag = true;
}
function Drag(e)  {
  if(start_drag)  {
    // Browserweiche
    if(!e)
      e = window.event;
      
    // Mausposition - Startwert
    var posY = e.screenY - startY;
    // Schiebebereich einschraenken    
    if(posY > 25 && posY < 70)  {
      // Position zuweisen
      slider.style.top = posY + "px";
      // Schriftgroesse aendern
      document.getElementById("testword").style.fontSize = posY - 10 + "px";
    }
  }
}
function StopDrag(e)  {
  start_drag = false;
}

CSS im HEAD:

#slidebarwrapper  {
  position: relative;
  width: 127px;
  height: 106px;
}
#testword  {
  margin: 0;
}

HTML im BODY:

<div id="slidebarwrapper">
  <img src="html.gif" width="127" height="106" alt="HTML" />
  <img src="slider.gif" width="24" height="8"
  alt="Schriftgrösse regeln" id="slidebar" />
</div>
<p id="testword">TEST</p>