Drag 'n Drop im Wiki

[JürgenB]

Hallo,

ich überarbeite gerade mein Drag 'n Drop Script und bin dabei auf das alte Script im Wiki gestoßen.

Wegen seines Alters kennt dieses Script nur die Maus und keine Touch- und Pointer-Events.

Soll ich die Seite überarbeiten und das Beispiel durch mein Beispiel ersetzen?

Ich berücksichtige Pointer-, Touch- und Maus-Events, dadurch ist das Script etwas umfangreicher geworden. Ich kenne kein Gererät, das die Mausevents noch benötigt. Die Touchevents werden noch für IOS-12 Geräte (z.B. mein Iphone6) benötigt. Soll man die drinlassen oder wegen der Übersichtlichkeit nur Pointerevents nehmen?

Zusätzlich habe ich auch Tastaturevents mit aufgenommen.

Die „Empfehlung: Verwenden Sie für ihre Projekte die Drag & Drop-API, die nativen Browser-Support bietet und viel weniger JavaScript-Code benötigt. Allerdings ist es lehrreich zusehen, wie dies auch selbst programmiert werden kann.“ ist irreführend, da das Drag & Drop-API Elemente im DOM umhängt und deren neue Position dann durch das CSS geregelt wird, geht es in diesem Script um das freie Positionieren der Elemente auf dem Bildschirm.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

ich überarbeite gerade mein Drag 'n Drop Script und bin dabei auf das alte Script im Wiki gestoßen.

ja, manche Artikel altern leider naturbedingt.

Soll ich die Seite überarbeiten und das Beispiel durch mein Beispiel ersetzen?

Ich fände das sehr gut!

Ich berücksichtige Pointer-, Touch- und Maus-Events, dadurch ist das Script etwas umfangreicher geworden. Ich kenne kein Gererät, das die Mausevents noch benötigt. Die Touchevents werden noch für IOS-12 Geräte (z.B. mein Iphone6) benötigt. Soll man die drinlassen oder wegen der Übersichtlichkeit nur Pointerevents nehmen?

Werden die Mausevents auch nicht emuliert? Und wenn man einen vernünftigen Browser verwendet, der wird doch wohl die Maus unter Pointer-Events führen und damit auch versorgt, oder nicht?

Zusätzlich habe ich auch Tastaturevents mit aufgenommen.

Ich kann mir jetzt spontan kein Drag&Drop mit der Tastatur vorstellen. Schön ist es natürlich, dass man fokussierte Quadrate mit den Cursor-Tasten bewegen kann, aber mit echtem Dragging hat das nichts mehr zu tun.

Da die draggables mit der Tabulator-Taste erreichbar sind, hat Dein Beispiel einen klaren Sinn. Also: dafür!

Allerdings ist es lehrreich zusehen, wie dies auch selbst programmiert werden kann.“ ist irreführend, da das Drag & Drop-API Elemente im DOM umhängt und deren neue Position dann durch das CSS geregelt wird, geht es in diesem Script um das freie Positionieren der Elemente auf dem Bildschirm.

Das ist ja gerade das Problem gewesen. Wenn man ein Element draggable macht, muss man es auf position:relative setzen und dann die Koordinaten verwurschteln. Ist das Dragging beendet, entfernt man die relative Positionierung wieder, löscht die x- und y-Verschiebung und modelt das Element an die Stelle im DOM, an die es sollte. Was genau macht die Drag&Drop-API jetzt genau anders? Erspart sie uns das Gerödel mit relativer Positionierung und den x-/y-Koordinaten?

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

Ich berücksichtige Pointer-, Touch- und Maus-Events, dadurch ist das Script etwas umfangreicher geworden. Ich kenne kein Gererät, das die Mausevents noch benötigt. Die Touchevents werden noch für IOS-12 Geräte (z.B. mein Iphone6) benötigt. Soll man die drinlassen oder wegen der Übersichtlichkeit nur Pointerevents nehmen?

Werden die Mausevents auch nicht emuliert? Und wenn man einen vernünftigen Browser verwendet, der wird doch wohl die Maus unter Pointer-Events führen und damit auch versorgt, oder nicht?

die Pointer-Events feuern auch bei Maus-Aktionen. Daher der Test, welches Model unterstützt wird. Hier mal meine Pointer-Event-Testseite. Bis auf das iPhone 6 verwenden alle meine Geräte die Pointer-Events. Was nehmen deine Geräte?

Wenn man sich auf aktuelle Geräte beschränkt, kann man Maus- und Touch-Events weglassen. Ich bin da eher etwas konservativ und denke auch noch an die alten Schätzchen. Aber wenn hier keiner ein Gerät hat, das weder Pointer- noch Touch-Events unterstützt, lasse ich die Mouse-Events weg.

Allerdings ist es lehrreich zusehen, wie dies auch selbst programmiert werden kann.“ ist irreführend, da das Drag & Drop-API Elemente im DOM umhängt und deren neue Position dann durch das CSS geregelt wird, geht es in diesem Script um das freie Positionieren der Elemente auf dem Bildschirm.

Das ist ja gerade das Problem gewesen. Wenn man ein Element draggable macht, muss man es auf position:relative setzen und dann die Koordinaten verwurschteln. Ist das Dragging beendet, entfernt man die relative Positionierung wieder, löscht die x- und y-Verschiebung und modelt das Element an die Stelle im DOM, an die es sollte. Was genau macht die Drag&Drop-API jetzt genau anders? Erspart sie uns das Gerödel mit relativer Positionierung und den x-/y-Koordinaten?

ich nehme da sogar position:absolute, damit keine Lücken entstehen.

Ich habe das Drag & Drop-API so verstanden, das da ein freies (pixelweises) Verschieben, um das es ja hier geht, garnicht vorgesehen ist. Das Drag & Drop-API ist mMn eher für so etwas wie ein Puzzle geeignet.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

Bis auf das iPhone 6 verwenden alle meine Geräte die Pointer-Events. Was nehmen deine Geräte?

ich habe hier nur ziemlich aktuelle Androiden oder Ubuntu/Linux mit aktuellen Browsern. Von daher würden hier Pointer-Events genügen.

ich nehme da sogar position:absolute, damit keine Lücken entstehen.

Für meine Anwendungsfälle benötige ich aber die Lücken.

Ich habe das Drag & Drop-API so verstanden, das da ein freies (pixelweises) Verschieben, um das es ja hier geht, garnicht vorgesehen ist. Das Drag & Drop-API ist mMn eher für so etwas wie ein Puzzle geeignet.

OK.

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Servus!

Hallo,

ich überarbeite gerade mein Drag 'n Drop Script und bin dabei auf das alte Script im Wiki gestoßen.

Wegen seines Alters kennt dieses Script nur die Maus und keine Touch- und Pointer-Events.

Soll ich die Seite überarbeiten und das Beispiel durch mein Beispiel ersetzen?

Ja bitte! +1 (wie Jörg sagen würde)

Ich berücksichtige Pointer-, Touch- und Maus-Events, dadurch ist das Script etwas umfangreicher geworden. Ich kenne kein Gererät, das die Mausevents noch benötigt. Die Touchevents werden noch für IOS-12 Geräte (z.B. mein Iphone6) benötigt. Soll man die drinlassen oder wegen der Übersichtlichkeit nur Pointerevents nehmen?

Was für dich einfacher zum umsetzen ist. Wenn Du sie schon drin hast?

Zusätzlich habe ich auch Tastaturevents mit aufgenommen.

Die „Empfehlung: Verwenden Sie für ihre Projekte die Drag & Drop-API, die nativen Browser-Support bietet und viel weniger JavaScript-Code benötigt. Allerdings ist es lehrreich zusehen, wie dies auch selbst programmiert werden kann.“ ist irreführend, da das Drag & Drop-API Elemente im DOM umhängt und deren neue Position dann durch das CSS geregelt wird, geht es in diesem Script um das freie Positionieren der Elemente auf dem Bildschirm.

Das hab ich 2015 so verbrochen. Die damals neue Drag & Drop API (die aus MS IE5 übernommen wurde) ist gar nicht so toll.

Ich wollte auch immer mal ein Quiz erstellen. Diesen Stub werde ich wsl. depublizieren:

• JavaScript/Tutorials/Spiele/Drag_and_Drop-Quiz

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@JürgenB

IOS-12 Geräte (z.B. mein Iphone6)

Du bist abergläubisch und lässt die 13 aus?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

IOS-12 Geräte (z.B. mein Iphone6)

Du bist abergläubig und lässt die 13 aus?

leider nein, aber mein altes 6er bekommt heute Nacht nur die 12.4.6. Oder gibt es da einen „Trick“?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

IOS-12 Geräte (z.B. mein Iphone6)

Du bist abergläubig und lässt die 13 aus?

leider nein, aber mein altes 6er bekommt heute Nacht nur die 12.4.6. Oder gibt es da einen „Trick“?

Keine Ahnung. Auf meinem SE läuft gegenwärtig 13.3.1. Ist das SE nicht das 6er im 5er Gehäuse?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[JürgenB]

Hallo Gunnar,

IOS-12 Geräte (z.B. mein Iphone6)

Du bist abergläubig und lässt die 13 aus?

leider nein, aber mein altes 6er bekommt heute Nacht nur die 12.4.6. Oder gibt es da einen „Trick“?

Keine Ahnung. Auf meinem SE läuft gegenwärtig 13.3.1. Ist das SE nicht das 6er im 5er Gehäuse?

ich glaube, das SE ist ein 6s im 5er Gehäuse.

Gruß
Jürgen

[Auge]

Hallo

IOS-12 Geräte (z.B. mein Iphone6)

Du bist abergläubig und lässt die 13 aus?

Für das iPhone 6 gibt es laut Wikipedia nur iOS 12.x.

Auf meinem SE läuft gegenwärtig 13.3.1.

Es könnte schon auf 13.4.1 sein ^[1][2].

Ist das SE nicht das 6er im 5er Gehäuse?

Das iPhone SE ist (vorwiegend) ein 6s im Gehäuse eines 5s.

Tschö, Auge

---

1. Das Release von iOS 13.4.1 war am 7.4.2020. ↩︎

2. Meines lädt gerade das Update von 13.4 auf 13.4.1. ↩︎

[JürgenB]

Hallo,

ich habe mein Drag 'n Drop jetzt mal ins Wiki gestellt, noch ohne Text.

Könnt ihr euch das Beispiel bitte mal ansehen und auch testen?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

man kann die beweglichen Quadrate löschen, nicht aber die festen. Gibt es dafür einen Grund?

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

man kann die beweglichen Quadrate löschen, nicht aber die festen. Gibt es dafür einen Grund?

ja, ich habe das nicht vorgesehen. Mir ging es nur darum, zu testen, ob der MutationObserver macht, was ich erwarte. Es ist aber kein Problem, da auch noch einen Close-Button einzubauen.

Wichtiger ist, ob das Bewegen auch in Android- und Linux-Browsern funktioniert.

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

Wichtiger ist, ob das Bewegen auch in Android- und Linux-Browsern funktioniert.

in meinen Androiden tut es das.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber JürgenB,

Könnt ihr euch das Beispiel bitte mal ansehen und auch testen?

dieser Link führt direkt zu einer frickl-Ansicht. In dieser wollen die Buttons nicht...

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo Felix,

Könnt ihr euch das Beispiel bitte mal ansehen und auch testen?

dieser Link führt direkt zu einer frickl-Ansicht. In dieser wollen die Buttons nicht...

bei mir führt der Link zum Kapitel „Das vollständige Beispiel“. Da kann ich dann zwischen „Vorschau“ (funktioniert bei mir) und „ausprobieren“ (funktioniert nicht) wählen. querySelectorAll("button") ist wohl nicht spezifisch genug.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

bei mir führt der Link zum Kapitel „Das vollständige Beispiel“.

Du hast völlig recht und ich habe offensichtlich in der Eile nicht bedacht, dass ich den "ausprobieren"-Link verwendet hatte. m(

Liebe Grüße

Felix Riesterer

[Auge]

Hallo

ich habe mein Drag 'n Drop jetzt mal ins Wiki gestellt, noch ohne Text.

Könnt ihr euch das Beispiel bitte mal ansehen und auch testen?

• Firefox 75 unter Ubuntu 18.04 tut.
• Chromium 80 unter Ubuntu 18.04 tut.

Tschö, Auge

[JürgenB]

Hallo,

das Tutorial ist jetzt überarbeitet. Vielen Dank für die Tests.

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Drag_and_Drop

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

ein Anwendungsbeispiel könnten verschiebbare Tabellenspalten sein. In Verbindung mit deinem Tabellensortierer könnte auch die Reihenfolge der Spalten gespeichert werden.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

mein Drag and Drop bewegt absolut positionierte Elemente frei im Viewport, ohne ihre Lage im DOM zu verändern. Wenn man eine Tabelle frei sortieren möchte, geht das ja über Umhängen im DOM-Baum des tbody. Ich vermute, das dazu das Drag and Drop API besser geeignet ist.

Gruß
Jürgen