Gunnar Bittersmann: Drag-Image im IE/Edge

IE/Edge haben die Methode event.dataTransfer.setDragImage() nicht implementiert. Weiß jemand, wie ich auf anderem Weg das drag image (das Bild, was beim Draggen am Mauszeiger hängt) wegbekomme?

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

akzeptierte Antworten

  1. @@Gunnar Bittersmann

    IE/Edge haben die Methode event.dataTransfer.setDragImage() nicht implementiert.

    Mihai Valentin hat einen Polyfill setDragImage-IE geschrieben.

    Der brachte mich auf die Idee:

    Weiß jemand, wie ich auf anderem Weg das drag image (das Bild, was beim Draggen am Mauszeiger hängt) wegbekomme?

    		if (typeof event.dataTransfer.setDragImage === 'function')
    		{
    			event.dataTransfer.setDragImage(document.head, 0, 0);
    		}
    		else
    		{
    			element.style.opacity = '0';
    			
    			window.requestAnimationFrame(function ()
    			{
    				element.style.opacity = '1';
    			});
    		}
    

    tut’s in Edge. IE muss ich mal weitersehen …

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. @@Gunnar Bittersmann

      IE muss ich mal weitersehen …

      IE steigt bei event.dataTransfer.setData('text/plain', '…'); aus; 'text/plain' gefällt ihm wohl nicht.

      Mit event.dataTransfer.setData('text', '…'); geht’s.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. @@Gunnar Bittersmann

        Mit event.dataTransfer.setData('text', '…'); geht’s.

        „Geht“ heißt in dem Fall: IE bricht das Script nicht ab. Das drag image ist weiterhin zu sehen.

        opacity zu ändern funzt im Edge, nicht aber im IE. visibility zu ändern tut’s aber.

        Würden Screenreader bei Änderung der Sichtbarkeit auf visible anfangen loszuplappern? Hab vorsichtshalber mal ein ARIA-Attribut spendiert. Hab aber noch nicht getestet, ob das wirkt.

        		if (typeof event.dataTransfer.setDragImage === 'function')
        		{
        			event.dataTransfer.setDragImage(document.head, 0, 0);
        		}
        		else
        		{
        			calendarListElement.style.visibility = 'hidden';
        			calendarListElement.setAttribute('aria-hidden', 'false');
        			
        			window.requestAnimationFrame(function ()
        			{
        				calendarListElement.style.visibility = 'visible';
        			});
        		}
        

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Würden Screenreader bei Änderung der Sichtbarkeit auf visible anfangen loszuplappern?

          Screenreader + "Drag & Drop"? Hilf meiner Fantasie mal bitte auf die Sprünge!

          1. @@Mitleser

            Screenreader + "Drag & Drop"? Hilf meiner Fantasie mal bitte auf die Sprünge!

            Zum einen werden Screenreader nicht nur von Blinden verwendet. Sehtüchtigkeit ist nicht 1 oder 0.

            Zum anderen: warum sollen nicht auch Blinde Objekte auf dem Bildschirm bewegen können?

            Generell fährt man wohl mit Heydon Pickerings Maxime[1] gut:
            “When designing for The Web, your users could be anyone. Make fewer decisions about them so they can make more for themselves.”

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

            1. Quelle ↩︎

            1. @@Gunnar Bittersmann

              Zum einen werden Screenreader nicht nur von Blinden verwendet. Sehtüchtigkeit ist nicht 1 oder 0.

              Not All Screen Reader Users Are Blind

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        2. @@Gunnar Bittersmann

          opacity zu ändern funzt im Edge, nicht aber im IE. visibility zu ändern tut’s aber.

          … im IE 11 unter Windows 10. Nicht aber im IE 11 unter Windows 7. WTF?

          Statt visibility hab ich dann eben width geändert:

          		if (typeof event.dataTransfer.setDragImage === 'function')
          		{
           			event.dataTransfer.setDragImage(document.head, 0, 0);
          		}
          		else
          		{
          			calendarListElement.style.width = '0';
          			calendarListElement.setAttribute('aria-hidden', 'false');
          			
          			window.requestAnimationFrame(function ()
          			{
          				calendarListElement.style.width = 'auto';
          			});
          		}
          

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory