Drag & Drop m. Javascript [Javascript ist Toll!]

Warum Agentur Bashing gut ist »» «« Phentermine / Phentermin ist hochgefährlich!

3. Juli 2006 - 21:48

Drag & Drop m. Javascript

Ein einfaches Drag and Drop Beispiel.

Mit Div drumherum

javascript

/*

    =============================================

    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

Browser

Unter WinXP funktioniert das Skript mit dem IE 6 und IE 5.5, OP 7.01 und 8.01, FF 1.5.0 und 2.0.1

Comments (4)
3514 mal gelesen.

4 Kommentare Einen Kommentar hinterlassen »

Kommentare

1. Kommentar von rotamint
Donnerstag 8.März 2007: 18:10

Hallo Struppi,

du hast mich auf die Lösung des Problems gebracht im FF kann man mit dem Event Model 3 (addEventListener) keine Bilder () mit Drag and Drop verschieben dies geht nur wenn man ein Div mit einem Background Image versieht. IE 6.0 aufwärts behercht im Modell 3 attachEvent und Opera 8.5 aufwärts alles beides . Mit Modell 2 so wie in deinem Beispiel geht es hat den Nachteil das man nur eine Ereignis auf eine Funktion legen kann.

Entwickle gerade ein Explorer Tree mit Drag und Drop wenn du Zeit und Intresse hast zwecks Gedanken austausch dann melde dich unter meiner email.

cu rotamint

2. Kommentar von rotamint
Donnerstag 8.März 2007: 22:57