Drag&Drop mit Ziel-Highlight

[Felix Riesterer]

Liebe Javascriptler,

ich studiere nun schon seit Stunden die Google-Tutorials zu Drag&Drop, als auch das zu diesem Thema recht umfangreiche Archiv von SELFHTML.

Was ich erreichen will: Ich möchte ein User-Interface erweitern. In seiner jetzigen Form zeigt es einen Dateibaum an, wie man es z.B. beim Windows-Explorer kennt. Man kann Dateien und Ordner markieren, um damit verschiedene Dinge zu tun (umbenennen, editieren, löschen, etc.). Um nun das Verschieben von Dateien und Ordnern sinnvoll zu integrieren (momentan ist diese Funktion nicht implementiert), möchte ich die Dateien/Ordner per Drag&Drop einem Zielordner zuweisen können.

Was mir noch nicht gelingt: Ich kann den Zielordner noch nicht ausmachen, da das mouseover-Event nicht feuern kann. Das ist völlig logisch, da ja das zu bewegende Element den höchsten z-index hat und das Ziel vor der Maus verdeckt. Ich suche nun nach einer praktikablen Lösung, wie ich beim Bewegen des zu verschiebenden Elements "sehen" kann, was sich darunter befindet, und das bei beliebig verschachteltem Dateibaum (<ul>).

Im Archiv bin ich über einen Thread gestolpert, in welchem Engywuck etwas über ein Bundesfinale von Jugend forscht schreibt. Hat jemand davon schon gehört? Die Gewinner betreiben eine Website (virtos.net), auf der sie natürlich gegen Geld Programmierdienste anbieten... jedoch möchte ich das schon selbst realisieren. Ich bräuchte nur die zündende Idee dazu.

Hat jemand eine Idee? Der Dateibaum ist übrigens so realisiert: [Mein Download-Ordner]

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Gernot Back]

Hallo Felix,

Im Archiv bin ich über einen Thread gestolpert, in welchem Engywuck etwas über ein Bundesfinale von Jugend forscht schreibt.

Hilft dir denn mein dort verlinktes Drag&Drop nicht, bei dem ich einfach unsichtbare Targetlayers mit einem noch höheren Z-Index als die Draggable-Layers auf die sichtbaren Pseudo-Targets lege?

http://www.sprachlernspiele.de/dragdrop/alaHP/zuordnen2.html

Gruß Gernot

[Felix Riesterer]

Lieber Gernot,

Hilft dir denn mein dort verlinktes Drag&Drop nicht, bei dem ich einfach unsichtbare Targetlayers mit einem noch höheren Z-Index als die Draggable-Layers auf die sichtbaren Pseudo-Targets lege?

http://www.sprachlernspiele.de/dragdrop/alaHP/zuordnen2.html

das dortige Javascript ist sehr unübersichtlich, weil es eben noch Uraltbrowser unterstützt. Die Idee mit dem noch höheren Z-Index bei extra Target-Layern scheint mir nicht schlecht, jedoch möchte ich mit meinem Script flexibel auf einen Dateibaum reagieren, der in einer verschachtelten <ul> abgebildet ist. Wie erzeuge ich denn dort die unsichtbaren Target-Layer? Und wie schließe ich von einem erreichten Target-Layer auf das eigentlich anvisierte <li>-Element darunter, um es hovern zu lassen?

Deine Idee in Ehren, aber sie scheint eher für Szenarios geeignet zu sein, in welchen ich von einem fixen HTML-Gerüst ausgehen kann... Bei einem längeren Dateibaum (stelle Dir einmal 300 Ordner mit 2000 Dateien vor!) wird das Ganze sehr wahrscheinlich unperformant (weshalb ich zum Falten der Ordner die onclicks schon serverseitig in den Quelltext schreiben lasse).

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Gernot Back]

Hallo Felix,

Deine Idee in Ehren, aber sie scheint eher für Szenarios geeignet zu sein, in welchen ich von einem fixen HTML-Gerüst ausgehen kann... Bei einem längeren Dateibaum (stelle Dir einmal 300 Ordner mit 2000 Dateien vor!) wird das Ganze sehr wahrscheinlich unperformant (weshalb ich zum Falten der Ordner die onclicks schon serverseitig in den Quelltext schreiben lasse).

Ich würde da bei dem Vorhaben bei _einer_, clientseitigen Technik (JavaScript) bleiben.

Hast du es denn schon geschafft, die 2000 Dateien absolut positioniert draggable zu machen?

Bei den heutigen Rechnern sind die 300 in einer verschachetelten Liste dargestellten Ordner dann doch nur noch ein Furz! Lies deren jeweilige absolute Position zum Fenster-Ursprung aus, clone entsprechende unsichtbare Pseudo-Targets mit höherem Z-Index absolut-positioniert darüber, dann wird das schon!

Wie ich dich kenne, wird daraus ein ganz geniales Skript, dessen Entstehung ich auch gerne mitverfolgen und unterstützen würde. Vielleicht finden sich hier auch noch Mitstreiter, denn so etwas können wir doch alle gebrauchen!

Gruß Gernot

[Felix Riesterer]

Lieber Gernot,

Wie ich dich kenne, wird daraus ein ganz geniales Skript, dessen Entstehung ich auch gerne mitverfolgen und unterstützen würde. Vielleicht finden sich hier auch noch Mitstreiter, denn so etwas können wir doch alle gebrauchen!

höre ich da ein I ?? Ansonsten danke für die Blumen! *ggg*

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Gernot Back]

Hallo Felix,

höre ich da ein I ?? Ansonsten danke für die Blumen! *ggg*

Kommt darauf an, ob du das "I" für "Initiative" oder "Ironie" hältst. Eine Initiative hielte ich jedenfalls für gut und würde mich dran beteiligen, wenn es so etwas nicht schon gibt. So ganz sicher bin ich mir da nicht; vielleicht gibt es so etwas ja doch schon, weiß aber nichts davon!

Ich denke, du musst für dein Vorhaben alles erst einmal in der Ordnerstruktur, wie es besteht in eine verschachtelte Liste schreiben, Ordner, wie Dateien, dann unsichtbar darüber absolut-positioniert anhand ausgelesenem absoluter OffsetLeft, ~Top, ~Width und ~Height mit unsichtbaren Layern darüber legen, dragbar machen, ondrag das Originalelement ausblenden, den absolut-positionierten Clone dann stattdessen einblenden, verschieben lassen und sobald er sich über einem anderen Ordner-Clone befindet, zum Drop freigeben, was dann ein Neuladen der Seite mit der neuen Ordnerstruktur auslösen würde. Erst an dem Punkt kämen dann also serverseitige Techniken zum Einsatz.

Gruß Gernot

[Felix Riesterer]

Lieber Gernot,

Kommt darauf an, ob du das "I" für "Initiative" oder "Ironie" hältst.

ich halte es ganz konkret für "initiativ-Strafe". :-)

wenn es so etwas nicht schon gibt. So ganz sicher bin ich mir da nicht; vielleicht gibt es so etwas ja doch schon, weiß aber nichts davon!

Die Herren von virtos.net haben sowas tatsächlich schon entwickelt. ich schrieb es schon im OP.

Ich denke, du musst für dein Vorhaben alles erst einmal in der Ordnerstruktur, wie es besteht in eine verschachtelte Liste schreiben,

Das habe ich doch schon, oder nicht?

Ordner, wie Dateien, dann unsichtbar darüber absolut-positioniert anhand ausgelesenem absoluter OffsetLeft, ~Top, ~Width und ~Height mit unsichtbaren Layern darüber legen, dragbar machen, ondrag das Originalelement ausblenden, den absolut-positionierten Clone dann stattdessen einblenden, verschieben lassen und sobald er sich über einem anderen Ordner-Clone befindet, zum Drop freigeben,

Bis dahin ist mir Dein Vorschlag vorher schon klar gewesen...

was dann ein Neuladen der Seite mit der neuen Ordnerstruktur auslösen würde.

• Sicherheitsabfrage (mit confirm() z.B.) ;-)

Erst an dem Punkt kämen dann also serverseitige Techniken zum Einsatz.

Bis auf das AJAX-gestützte Erweitern des Listings, um an die Unterordner zu gelangen. Aber auch dort wäre dann im Dokument das oben Beschriebene wieder durchzuführen... Klar.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Lieber Gernot,

Ich würde da bei dem Vorhaben bei _einer_, clientseitigen Technik (JavaScript) bleiben.

das mag schon sein. Inzwischen ist das XHTML-Dokument mit dem kompletten Verzeichnislisting (alle Ordner und alle Dateien verlinkt in einer verschachtelten <ul> mit Datei-Icons und Dateigrößenangabe) mehr als 700kb groß. Dass das per Javascript zu parsen eine kleine Ewigkeit dauert, ist logisch. Auch bei heutigen Computern! Daher habe ich mich dazu entschlossen, die Inhalte eines Unterordners erst bei Bedarf einzubinden (AJAX). Das sieht man aber beim Download-Ordner nicht, da dieser komplett beim ersten Laden ausgeliefert wird (er ist ja auch überschaubar groß!). Aber im Admin-Bereich, in dem das komplette Listing verfügbar sein soll, sind Dateigrößen von mehreren hundert Kilobytes einfach indiskutabel! Jeder Upload, jedes Umbenennen oder Editieren einer Datei wäre ein weiterer 700kb-Download. Völliger Quatsch!

Hast du es denn schon geschafft, die 2000 Dateien absolut positioniert draggable zu machen?

Ich habe es noch nicht versucht, da ich noch am Konzept meines Vorgehens arbeite. Ich sehe keinen Sinn darin, so eben einfach mal alle Elemente draggable zu machen. Irgendwie habe ich das Gefühl, es müsste doch genügen, wenn man das on-demand macht... Aber dann klappt das mit dem Highlighting nach der von Dir beschriebenen Methode nimmer. Ach, ich muss mir das noch gründlich überlegen.

Bei den heutigen Rechnern sind die 300 in einer verschachetelten Liste dargestellten Ordner dann doch nur noch ein Furz!

Wenn es nur Ordner wären... Aber es sind ja auch die darin enthaltenen Dateien gelistet! Damit bist Du dann ganz schnell bei mehr als dem Doppelten an Einträgen.

Lies deren jeweilige absolute Position zum Fenster-Ursprung aus, clone entsprechende unsichtbare Pseudo-Targets mit höherem Z-Index absolut-positioniert darüber, dann wird das schon!

Mal sehen.

so etwas können wir doch alle gebrauchen!

Ist das so? Naja, wenn das Script sich nicht nur auf Verzeichnis-Listings beschränkt... Aber wenn schon zwei Studenten dafür einen Forschungspreis eingeheimst, ja sogar gleich noch ein Software-Patent dafür angemeldet haben, dann scheint mir das doch ein ganz großer Brocken zu sein!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Mathias Brodala]

Hallo Felix.

Was mir noch nicht gelingt: Ich kann den Zielordner noch nicht ausmachen, da das mouseover-Event nicht feuern kann. Das ist völlig logisch, da ja das zu bewegende Element den höchsten z-index hat und das Ziel vor der Maus verdeckt. Ich suche nun nach einer praktikablen Lösung, wie ich beim Bewegen des zu verschiebenden Elements "sehen" kann, was sich darunter befindet, und das bei beliebig verschachteltem Dateibaum (<ul>).

Vielleicht hilft dir Tobias’ Template-Editor weiter. Dort können Elemente per Maus verschoben werden, wobei das jeweilige Ziel optisch hervorgehoben wird.

Einen schönen Samstag noch.

Gruß, Mathias

[Felix Riesterer]

Lieber Mathias,

Vielleicht hilft dir Tobias’ Template-Editor weiter. Dort können Elemente per Maus verschoben werden, wobei das jeweilige Ziel optisch hervorgehoben wird.

das steuert sich in etwa so prächtig wie das Kampf-Interface von Gothic3. :-(( Man klickt, etwas passiert, aber irgendwie passiert dann doch etwas anderes, als man eigentlich wollte.

Das mit dem Highlighten des Targets müsste ich mir mal genauer ansehen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Mathias Brodala]

Hallo Felix.

Vielleicht hilft dir Tobias’ Template-Editor weiter. Dort können Elemente per Maus verschoben werden, wobei das jeweilige Ziel optisch hervorgehoben wird.

das steuert sich in etwa so prächtig wie das Kampf-Interface von Gothic3. :-(( Man klickt, etwas passiert, aber irgendwie passiert dann doch etwas anderes, als man eigentlich wollte.

Du hast es schon gespielt? Ist die Steuerung so viel anders als im ersten/zweiten Teil?

Einen schönen Samstag noch.

Gruß, Mathias

[Felix Riesterer]

Lieber Mathias,

Du hast es schon gespielt? Ist die Steuerung so viel anders als im ersten/zweiten Teil?

ich finde es zum heulen! Dabei ist die andere Steuerung nichteinmal das Schlimmste. Aber wenn Du bei http://www.worldofgothic.de in den Foren einmal herumhörst, dann wirst Du Dir ein umfassenderes Bild machen können, als ich es hier in einem eigentlich nicht dafür vorgesehenem Forum malen kann.

Ich bin zum ersten Mal enttäuscht. Richtig enttäuscht! Ehrlich. Und das ist irgendwie überraschend, bei einem heillos begeisterten Gothic-Zocker der ersten Stunde. :-(

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Mathias Brodala]

Hallo Felix.

Du hast es schon gespielt? Ist die Steuerung so viel anders als im ersten/zweiten Teil?

ich finde es zum heulen! Dabei ist die andere Steuerung nichteinmal das Schlimmste. Aber wenn Du bei http://www.worldofgothic.de in den Foren einmal herumhörst, dann wirst Du Dir ein umfassenderes Bild machen können, als ich es hier in einem eigentlich nicht dafür vorgesehenem Forum malen kann.

Ich verspüre ehrlich gesagt wenig Lust, mich durch Dutzende von Threads zu wühlen. Beschreibe doch einmal kurz, was dich am neuen Teil stört.

Ich bin zum ersten Mal enttäuscht. Richtig enttäuscht! Ehrlich. Und das ist irgendwie überraschend, bei einem heillos begeisterten Gothic-Zocker der ersten Stunde. :-(

Klingt ja nicht sonderlich rosig. Auch ich bin stets gerne in die Kolonie/Khorinis eingekehrt. Und jedes Mal war die Entwicklung unseres namenlosen Protagonisten interessant anzusehen; konnte ihn am Anfan noch jeder kleine Scavenger umnieten, rennt man später mühelos mit einem großen Zweihänder durch die gegnerischen Heerscharen. Und die Zauber erst, hachja …

Einen schönen Samstag noch.

Gruß, Mathias

[Felix Riesterer]

Lieber Mathias,

Beschreibe doch einmal kurz, was dich am neuen Teil stört.

nicht hier. Ich denke, es gehört wirklich nicht hierher. Ich schicke Dir 'ne Mail. OK?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Mathias Brodala]

Hallo Felix.

Beschreibe doch einmal kurz, was dich am neuen Teil stört.

nicht hier. Ich denke, es gehört wirklich nicht hierher. Ich schicke Dir 'ne Mail. OK?

Einverstanden.

Einen schönen Samstag noch.

Gruß, Mathias