// Benützung:
// Das verschiebare Element, muss ein Element enthalten, das einen "Knopf" als child haben muss.
// Dem Knopf sollte dann über Javascript! der Onmousedown-Handler dragstart hinzugefügt werden. Bsp:
//
// obj.onmousedown = dragstart;
//
// Alles andere erledigt das Skript. Es können auch mehrere Popups und/oder Halter definiert werden.




//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;

// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;

// Mausposition
var posx = 0;
var posy = 0;


function dragstart(ereignis) {
	//Wird aufgerufen, wenn ein Objekt bewegt werden soll
	
	// aktuelle Maus-Position speichern
	posx = document.all ? window.event.clientX : ereignis.pageX;
	posy = document.all ? window.event.clientY : ereignis.pageY;
	dragobjekt = this;
	dragx = posx - dragobjekt.parentNode.offsetLeft;
	dragy = posy - dragobjekt.parentNode.offsetTop;
	
	// Initialisierung der Überwachung der Events
	document.onmousemove = drag;
	document.onmouseup = dragstop;
	
	// Verhindert, dass der Browser denkt, dass der Anwender Text markieren wollen
	return false;
}
 

function dragstop() {
	//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
	dragobjekt=null;
	// Die Handler wieder zurücksetzen
	document.onmousemove = null;
	document.onmouseup = null;
}

function drag(ereignis) {
	  //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
	  posx = document.all ? window.event.clientX : ereignis.pageX;
	  posy = document.all ? window.event.clientY : ereignis.pageY;
	  if(dragobjekt != null) {
	    dragobjekt.parentNode.style.left = (posx - dragx) + "px";
	    dragobjekt.parentNode.style.top = (posy - dragy) + "px";
	  }
}