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