JürgenB: Drag 'n Drop im Wiki

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

  1. 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

    1. 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

      1. 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

  2. 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:

    Herzliche Grüße

    Matthias Scharwies

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
  3. @@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!

    --
    Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
    1. 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

      1. @@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!

        --
        Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
        1. 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

        2. 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

          --
          Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
          Hohle Köpfe von Terry Pratchett

          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. ↩︎

  4. problematische Seite

    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

    1. problematische Seite

      Hallo JürgenB,

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

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. problematische Seite

        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

        1. problematische Seite

          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

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    2. problematische Seite

      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

      1. problematische Seite

        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

        1. problematische Seite

          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

    3. problematische Seite

      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

      --
      Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
      Hohle Köpfe von Terry Pratchett
  5. 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

    1. 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

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. 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