Drag n Drop
DHTML - Objekte verschieben
Die Eventhandler sind Javascript, die Positionen sind CSS. Die Position einesObjektes muss absolut gegeben sein, eine ID braucht es aber nicht.
dragobjekt.style.left = (posx - dragx) + "px"
<script type="text/javascript">
// von: dthoma@gmx.net (gefunden auf: http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/)
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
// Position, an der das Objekt angeklickt wurde.
// relativ zur oberen, rechten Ecke des Objekts
var dragx = 0;
var dragy = 0;
// Mausposition
// relativ zur oberen, rechten Ecke des Fensters
var posx = 0;
var posy = 0;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
//Parameter element: Das zu bewegende Objekt.
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
dragobjekt=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.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
draginit();
</script>
Der Aufruf erfolgt über das Objekt:
<div onmousedown="dragstart(this)"
style="position:absolute;top:300px;left:200px;height:100px;width:100px;background:Gold;">
Drag & drop me! </div>
Eim Bild muss als Background-Image (!) in den Container geladen werden:
<div onmousedown="dragstart(this)" style="position:absolute;top:300px;left:400px;height:100px;width:120px;
background-image:url(images/face_1.jpg);"> Bild als BG </div>
Das Krokodilbild, als Bild-Objekt, bleibt nach dem ersten Klick und der Bewegung an der Maus haften:
<img src="images/krokodil.jpg" alt="Dragable Image" onmousedown="dragstart(this)"
style="position:absolute;top:300px;left:600px; />
Der Effekt tritt auch auf, wenn es wie beim zweiten Krokodil in einen Container gelegt wird:
<div onmousedown="dragstart(this)" style="position:absolute;top:300px;left:800px;">
<img src="images/krokodil.jpg" alt="Dragable Image" /></div>
Check den Code.