Rolf B: HTML 5 Drag und Drop API - dropEffect

Hallo alle,

ich baue gerade an einer Demo für das Drag & Drop API von HTML 5 und verzweifle am Drop-Effekt.

Grundsätzlich ist es so, dass man im dragstart Event die effectAllowed-Eigenschaft setzt, auf copy, link, move, copyLink, copyMove, linkMove, all oder none.

Im Firefox ist es nun so, dass ich nicht viel mehr tun muss, außer im dragover-Event preventDefault aufzurufen, wenn ich über einem gültigen Drop-Ziel bin. Basierend auf effectAllowed und dem Umstand, ob ich Ctrl oder Alt drücke, schaltet der Cursor und auch der Wert von dropEffect automatisch um, und im drop-Event finde ich diesen Wert auch vor.

In Chrome dagegen ändert sich der Wert von dropEffect oder der Drag-Cursor in keiner Weise, es sei denn, ich setze dropEffect im dragover Event explizit auf copy, link oder move. Aber egal was ich setze, im drop-Event ist der gesetzte Wert wieder none.

Wenn man ein wenig im Netz sucht, wird das als Jahre alter Bug von Chromium bezeichnet. Einen richtigen aktiven Bug dazu findet man allerdings nicht.

Wer von euch hat schon mal D&D programmiert und wie geht ihr da mit dem Drop Effect um?

Rolf

--
sumpsi - posui - obstruxi
  1. Hallo Rolf,

    Wer von euch hat schon mal D&D programmiert und wie geht ihr da mit dem Drop Effect um?

    ich, aber ohne D&D-API. Ich wollte die Elemente frei positionieren, und nicht in irgendwelche vordefinierten Töpfe legen.

    Für das Öffnen einer xml_Datei verwende ich das D&D-API, um die Datei einfach in das Browserfenster ziehen zu können. Aber da musste ich bis zu den von dir beschriebenen Problemen nicht vordringen.

    In Chrome ...

    kann man sich das schon irgendwo ansehen? Ich kann mir das dann mal im Safari (MacOS, IOS) ansehen. Danach musst du dann entscheiden, ob und wie das D&D-API schon flächendeckend verwendet werden kann.

    Gruß
    Jürgen

    1. Hallo JürgenB,

      http://quiz.borchmann.one/quiz.htm

      Rolf

      --
      sumpsi - posui - obstruxi
      1. Hallo Rolf,

        Safari-Console:

        [Log] DragEnter: none of possible copyMove (ddquiz.js, line 117)
        [Log] DragLeave: none of possible copyMove (ddquiz.js, line 125)
        [Log] DragEnter: none of possible copyMove (ddquiz.js, line 117)
        [Log] DragOver: copy of possible copyMove (ddquiz.js, line 109, x51)
        [Log] DragLeave: none of possible copyMove (ddquiz.js, line 125)
        [Log] DragEnter: none of possible copyMove (ddquiz.js, line 117)
        [Log] DragOver: copy of possible copyMove (ddquiz.js, line 109, x238)
        

        MacOS-Firefox-Console:

        Uncaught TypeError: dZone.classList is undefined
            getDropzone http://quiz.borchmann.one/ddquiz.js?bust=2:135
            handleDragEnterEvent http://quiz.borchmann.one/ddquiz.js?bust=2:114
            EventListener.handleEvent* http://quiz.borchmann.one/ddquiz.js?bust=2:215
        ddquiz.js:135:11
        DragEnter: move of possible uninitialized ddquiz.js:117:15
        Uncaught TypeError: dZone.classList is undefined
            getDropzone http://quiz.borchmann.one/ddquiz.js?bust=2:135
            handleDragLeaveEvent http://quiz.borchmann.one/ddquiz.js?bust=2:122
            EventListener.handleEvent* http://quiz.borchmann.one/ddquiz.js?bust=2:216
        ddquiz.js:135:11
        DragOver: copy of possible uninitialized ddquiz.js:109:15
        DragEnter: move of possible uninitialized ddquiz.js:117:15
        DragLeave: none of possible uninitialized ddquiz.js:125:15
        DragOver: copy of possible uninitialized 5 ddquiz.js:109:15
        DragEnter: move of possible uninitialized ddquiz.js:117:15
        DragLeave: none of possible uninitialized ddquiz.js:125:15
        DragOver: copy of possible uninitialized 4 ddquiz.js:109:15
        DragLeave: none of possible uninitialized ddquiz.js:125:15
        DragEnter: move of possible uninitialized ddquiz.js:117:15
        DragOver: copy of possible uninitialized 43 ddquiz.js:109:15
        DragLeave: none of possible uninitialized ddquiz.js:125:15
        DragEnter: move of possible uninitialized ddquiz.js:117:15
        DragOver: copy of possible uninitialized
        

        Gruß
        Jürgen

        1. Hallo JürgenB,

          What The Fuc…hs?

          Ich setze effectAllowed doch auf moveLink, nicht copyMove. Und wieso kennt McFox die classList Eigenschaft nicht? Entweder liefert Dir one anderen Kram als mir, oder da passieren merkwürdige Dinge.

          Rolf

          --
          sumpsi - posui - obstruxi