Javascript ist Toll!

/*  
    =============================================
    Ein einfaches Drag & Drop Beispiel
    =============================================
 
    Änderungen:
 
    11.02.2007
    * Opera braucht den Test ob className überhaupt einen Wert enthält
    15.10.2006:
    * Quirksmodetest für den IE war Quatsch!
    * Objekte innerhalb positionierter Elemente können jetzt auch gedraggt werden
    * Anonyme Funktion zur Vermeidung globaler Variabeln.
 
*/
( function() { // Das ist eine Anonyme Funktion, die sofort aufgerufen wird.
// dadurch sind die Variabeln, die hier stehen,
// nur im lokalen Kontext sichtbar.
var dragObject = null; // Das Objekt was "gedraggt" wird
var start = [];
function drag_start(e)
{
    // Position des Elements
    start = getPos(this);
    // Position des Events
    var evt_pos = getEvtPos(e);
    // Die realative Startposition
    start[0] -= evt_pos[0];
    start[1] -= evt_pos[1];
 
    // Die Dragfunktion aktivieren
    dragObject = this;
    document.onmouseup = end_drag;
    document.onmousemove = do_drag;
 
    // ist wichtig, da ansonsten FF nicht draggt.
    return false;
}
 
function do_drag(e)
{
    if(!dragObject) return;
 
   // Position des Events
    var pos = getEvtPos(e);
    dragObject.style.top = (pos[0] + start[0]) + 'px';
    dragObject.style.left = (pos[1] + start[1]) + 'px';
    return false;
}
function end_drag(e)
{
    document.onmouseup = null;
    document.onmousemove = null;
    dragObject = null
    return false;
}
window.onload = function()
{
    var all = document.all ? document.all : document.getElementsByTagName('*');
    for(var i = 0; i < all.length; i++)
    if(all[i].className && all[i].className.indexOf('drag') > -1)
    {
         all[i].onmousedown = drag_start;
         all[i].style.cursor = 'move';
    }
}
 
// Hilfsfunktionen:
function getPos(o) // Rückgabewert: [top, left]
{
    var t = l = 0;
    if(typeof o.offsetTop != 'undefined')
    {
         t += o.offsetTop;
         l += o.offsetLeft;
    }
    return [t, l];
}
function getEvtPos(e)
{
    if(!e) e = window.event;
    var t = e.pageY ? e.pageY : e.clientY + window.document.body.scrollTop;
    var l = e.pageX ? e.pageX : e.clientX + window.document.body.scrollLeft;
    return [t, l];
}
 
})() // Ende der anonymen Funktion

/* ============================================= Ein einfaches Drag & Drop Beispiel ============================================= Änderungen: 11.02.2007 * Opera braucht den Test ob className überhaupt einen Wert enthält 15.10.2006: * Quirksmodetest für den IE war Quatsch! * Objekte innerhalb positionierter Elemente können jetzt auch gedraggt werden * Anonyme Funktion zur Vermeidung globaler Variabeln. */ ( function() { // Das ist eine Anonyme Funktion, die sofort aufgerufen wird. // dadurch sind die Variabeln, die hier stehen, // nur im lokalen Kontext sichtbar. var dragObject = null; // Das Objekt was "gedraggt" wird var start = []; function drag_start(e) { // Position des Elements start = getPos(this); // Position des Events var evt_pos = getEvtPos(e); // Die realative Startposition start[0] -= evt_pos[0]; start[1] -= evt_pos[1]; // Die Dragfunktion aktivieren dragObject = this; document.onmouseup = end_drag; document.onmousemove = do_drag; // ist wichtig, da ansonsten FF nicht draggt. return false; } function do_drag(e) { if(!dragObject) return; // Position des Events var pos = getEvtPos(e); dragObject.style.top = (pos[0] + start[0]) + 'px'; dragObject.style.left = (pos[1] + start[1]) + 'px'; return false; } function end_drag(e) { document.onmouseup = null; document.onmousemove = null; dragObject = null return false; } window.onload = function() { var all = document.all ? document.all : document.getElementsByTagName('*'); for(var i = 0; i < all.length; i++) if(all[i].className && all[i].className.indexOf('drag') > -1) { all[i].onmousedown = drag_start; all[i].style.cursor = 'move'; } } // Hilfsfunktionen: function getPos(o) // Rückgabewert: [top, left] { var t = l = 0; if(typeof o.offsetTop != 'undefined') { t += o.offsetTop; l += o.offsetLeft; } return [t, l]; } function getEvtPos(e) { if(!e) e = window.event; var t = e.pageY ? e.pageY : e.clientY + window.document.body.scrollTop; var l = e.pageX ? e.pageX : e.clientX + window.document.body.scrollLeft; return [t, l]; } })() // Ende der anonymen Funktion