osdata.org - Webentwicklung und mehr

osdata.org --> TechTalk --> AXAJ Part 2

02/06

Vom Web zum Desktop:

Frei positionierbare Elemente mit AJAX und PHP
Part II - Schöner schieben mit JavaScript !

Auch ohne die Einbindung der desktop.js können wir unsere Elemente jetzt schon schön im Browserfenster herumschubsen. Jedoch wäre bei einem Seiten-Refresh alles wieder an der alten Stelle. Um dies zu verhindern, kommt nun oben genannte Datei zum Einsatz, die wir uns nun mal etwas genauer anschauen:

//Das XMLHttpRequest Objekt
var xmlHttp = false;

//Instanz erstellen
//Beim IE handelt es sich um ein ActiveX Objekt, in den 
//anderen Browsern ist es bereits einkompiliert.

//Wir versuchen unser Glück und nehmen an, der User
//surft mit einem M$ Internet-Explorer:

try {
    xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
    try {
        xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        xmlHttp  = false;
    }
}

//War wohl nix, deshalb nun die Methode für Mozilla und Co.
if (!xmlHttp  && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
}

function savePos(elementId){
  var pos,element;
  element=document.getElementById(elementId);
  pos=chkPos(element);
  
  //Kleine Debug-Information, um zu überprüfen, ob chkPos() vernünftig läuft.
  document.getElementById('message').innerHTML = '<b>Position von Element <i>'+elementId+'</i>:'+ pos.x +' / '+ pos.y +'</b>';
  
  sendData(elementId,pos.x,pos.y);
  
}

function sendData(elementID,x,y){
  if (xmlHttp) {
      xmlHttp.open('POST', 'db.php');
      xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      xmlHttp.send('element=' + elementID + '&x='+ x + '&y=' + y);
  } 
}

function chkPos(element){
  var elem=element,
  tagname="",
  x=0,
  y=0;
  
  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined")){
    y+=elem.offsetTop;
    x+=elem.offsetLeft;
    tagname=elem.tagName.toUpperCase();
    
    if (tagname=="BODY" || tagname=="HTML")
      elem=0;

if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }

pos=new Object();
  pos.x=x;
  pos.y=y;
  
  return pos;
}

Zuerst wird hier versucht das XMLHttp-Objekt per Trial & Error Methode zu instanzieren. Trial & Error deshalb, weil dieses Objekt in den verschiedenen Browsern unterschiedlich verankert ist. Als nächstes haben wir die Funktion savePos(elementId). Sie wird bei unserem Mouse-Event aufgerufen und stößt die weiteren Prozesse an. Der Parameter elementId ist immer die die eindeutige ID unseres Containers.

Innerhalb dieser Funktion werden die Funktionen chkPos() und sendData() aufgerufen.

chkPos(element) ermittelt die Position des Elements und gibt ein neues Objekt pos mit den Eigenschaften x und y zurück.
Somit ist unsere Element-Position ermittelt und braucht nur noch On-the-Fly gespeichert zu werden, ein Fall für das XMLHttp-Objekt.
Die Funktion sendData() wird mit der Element-ID, und den gerade ermittelten x- und y-Koordinaten des Elements, als Parameter aufgerufen.

xmlHttp.open öffnet die Datei db.php und definiert die Übergabemethode POST.
xmlHttp.setRequestHeader setzt den benötigten Header.
xmlHttp.send versendet unsere Parameter in der Form, wie man es bei einer Variablenübergabe per GET gewohnt ist.

Kommentar schreiben ( Verbindung zur Datenbank nicht möglich
Access denied for user 'osdata_org'@'localhost' (using password: YES)

02/06

Vom Web zum Desktop:

Frei positionierbare Elemente mit AJAX und PHP Part II - Schöner schieben mit JavaScript !

Frei positionierbare Elemente mit AJAX und PHP
Part II - Schöner schieben mit JavaScript !