JavaScript-Frage zum verschieben von Div's

Hallo!

Ich versuche die "Drag&Drop"-Funktionalität auf meiner Seite zu realisieren, wobei ich aber noch ein paar Probleme habe. Ich arbeite gerade mit diesem Beispiel

Damit kann ich ja die vorhandenen Div's verschieben. Nun wollte ich mir zwei weitere Divs erstellen, die als sogenannte "DropZone" dienen. Lasse ich nun ein Div über diese "DropZone" fallen, soll das Div die Position der "DropZone" annehmen. Wie kann ich aber die "ID" der "DropZone" ermitteln, wenn ich mich mit einem Div über diese befinde und loslasse?
Ich brauche ja die "ID" der "DropZone", damit ich die Daten der Position ermitteln kann!

Vielen Dank schonmal im Voraus!

MfG
Echo

Hallo Echo

Ohne jetzt Erfahrung in diesem Thema zu haben, offenbare ich dir jetzt meine Gedanken dazu.

Ich denke das zumindest die DropZone IDs in einer Liste bzw. einem Array gehalten und für Javascript verfügbar gemacht werden sollte bevor alles anfängt.
Über die ID kommst du auch an die Position.

So rein theoretisch würde ich bei einem Fallenlassen des Divs einen Array mit meinen DropZones durchgehen und schauen ob es eine Kollision gibt.

Die Kollision kannst du so herausfinden:

• http://dotnet-snippets.de/dns/c-kollision-von-zwei-rechteckigen-objekten-pruefen-SID368.aspx

Gruss Peter

Mittels event.srcElement (IE) bzw. e.target (Mozilla und andere) bekommst du die ID. Diese kannst du ja im mousemove-Ereignis abfragen (falls du die DropZone beim Darüberbewegen visuell hervorheben willst), oder im mouseup-Ereignis, falls du prüfen willst, ob sich das gezogene Element in der DropZone befindet.

Mit Koordinatenkollision würde ich an deiner Stelle nicht arbeiten. Das ist fehleranfällig.

Hallo Marco

Wieder was gelernt 🙂

Original von marco.b
Mit Koordinatenkollision würde ich an deiner Stelle nicht arbeiten. Das ist fehleranfällig.

Intern wird das natürlich so gelöst sein.
Wieso meinst du fehleranfällig?

Gruss Peter

Hallo Peter,

klar intern wird das so gelöst sein, da hast du recht. Da liegt die Berechnung aber zum Glück in den Händen eines wohlgetesteten Browsers, der langjährig immer weiterentwickelt und von einer Unzahl von Menschen getestet wurde. Und genau aus diesem Grund sollte man sich auch nur noch die ID des DIVS zurückgeben lassen, und nicht mit eigenen Koordinatenberechnungen hantieren, denn der Umgang damit ist nicht ganz einfach:

1. Das Box-Model muss unter Umständen beachtet werden, padding, margin und dergleichen, wobei sich hier Browser in manchen Feinheiten unterschiedlich verhalten können.
2. Beim Scrollen mit Mausrädern mus man bei manchen Browsern (IE z.B.) noch ein Scrolloffset mit an die Mauskoordinaten hängen, bei anderen aber wieder nicht.
3. Wenn sich ein DIV bewegt, oder skaliert wird, müssen eventuell gespeicherte Koordinaten aktualisiert werden. Aus eigener Erfahrung kann ich sagen, dass man bei großen JavaScripts (>2.000 Zeilen) mit vielen Benutzerinteraktionsmöglichkeiten mal ganz schnell auf die Schnauze fliegen kann.
4. Der z-index müsste selbst berücksichtigt werden, durch Sortieren der Ergebnisse.

Man lebt einfach angenehmer und stressfreier, wenn man möglichst wenig auf Mauskoordinaten zugreift. Und das bietet sich in einem solchen Fall, wo es um das Ermitteln der ID geht, einfach an. 🙂

Hallo Marco

Vielen Dank für deine Erklärung.
So macht das natürlich Sinn 🙂

Gruss Peter

@ marco.b

Hast du vielleicht ein kleines Beispiel, wie ich vielleicht ein Div über ein anderes Div (sprich DropZone) verschieben kann und ich per AlertBox die Id der DropZone erhalten kann? Mittels diesem "srcElement" und "e.target"......

Vielen Dank schonmal im Voraus!

MfG
Echo