Javascript ist Toll!

3. July 2006 - 21:48

Drag & Drop m. Javascript

Ein einfaches Drag and Drop Beispiel.


Mit Div drumherum

/*  
    =============================================
    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

ähnliche Artikel

Comments (5)
540 mal gelesen.

5 Kommentare

Leave a comment »

Seiten:

1. Comment von: rotamint
8. March 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. Comment von: rotamint
8. March 2007: 22:57

Lösung für Model 3 Bilder Problem Firefox:

if(oEvent.preventDefault)
{
oEvent.preventDefault();
}

beim Opera wird dadurch auch der Text nicht mehr makiert

3. Comment von: Struppi
9. March 2007: 0:01

Ja, hatte ich mittlerweile auch rausgefunden schau hier:
http://javascript.jstruebig.de/javascript/67/

4. Comment von: barattt
21. March 2007: 17:17

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

5. Comment von: Julia
7. May 2012: 23:25

Hallo liebe Community-Freunde,
ich habe ein Problem. Ich habe leider nicht viel Ahnung von JavaScript sondern kenne nur das Grundgerüst. Ich möchte eine Drag & Drop Aufgabe erstellen. Das soll ungefähr so aussehen:
Man soll ungefähr 5 TextBox haben und 3 ZielBoxen. Jeder der 5 Boxen sollen in eines der Ziele verschiebbar sein. Aber in jedem Ziel soll nur ein Text sein, dass heisst 2 TextBoxen müssen am Ende übrig bleiben. Durch einen Klick sollen die TextBoxen anwählbar sein, und erst nachdem sie angeklickt wurden, soll man sie verschieben können.
Dann soll noch ein OK-Button sein, der dann als Popup-Fenster bzw. alert-Fenster einen Richtig oder Falsch ausgibt.
Hat Jemand vielleicht eine Lösung für mich oder könnte mir dies erstellen?
Ich wäre euch sehr dankbar.

Liebe Grüße
Julia

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful